Merge branch 'master' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib
This commit is contained in:
commit
98b3b44ed5
@ -22,7 +22,6 @@
|
|||||||
"TweenMax": false,
|
"TweenMax": false,
|
||||||
"TimelineLite": false,
|
"TimelineLite": false,
|
||||||
"TimelineMax": false,
|
"TimelineMax": false,
|
||||||
"d3": false,
|
|
||||||
"SystemJS": false,
|
"SystemJS": false,
|
||||||
"app": true
|
"app": true
|
||||||
},
|
},
|
||||||
|
|||||||
@ -2,5 +2,6 @@
|
|||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"jsxSingleQuote": true,
|
"jsxSingleQuote": true,
|
||||||
"tabWidth": 4,
|
"tabWidth": 4,
|
||||||
"semi": false
|
"semi": false,
|
||||||
|
"printWidth": 120
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,8 +4,6 @@ circle {
|
|||||||
stroke-width: 8px;
|
stroke-width: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mask circle {
|
mask circle {
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
fill: white;
|
fill: white;
|
||||||
|
|||||||
1136
dist/iwmlib.js
vendored
1136
dist/iwmlib.js
vendored
File diff suppressed because it is too large
Load Diff
4934
dist/iwmlib.pixi.js
vendored
4934
dist/iwmlib.pixi.js
vendored
File diff suppressed because it is too large
Load Diff
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2648,7 +2654,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line192">abstractpopup.js:192</a>
|
<a href="pixi_abstractpopup.js.html#line184">abstractpopup.js:184</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2753,7 +2759,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
|
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2912,7 +2918,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2100,7 +2106,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_badge.js.html#line110">badge.js:110</a>
|
<a href="pixi_badge.js.html#line106">badge.js:106</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2209,7 +2215,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
|
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2368,7 +2374,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3493,7 +3499,7 @@ the tint property of the icon sprite.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3598,7 +3604,7 @@ the tint property of the icon sprite.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3703,7 +3709,7 @@ the tint property of the icon sprite.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3810,7 +3816,7 @@ the tint property of the icon sprite.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</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>
|
<tr>
|
||||||
|
|
||||||
<td class="name"><code>padding</code></td>
|
<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>
|
</dl>
|
||||||
|
|
||||||
|
|
||||||
@ -2873,6 +3121,130 @@ app.scene.addChild(buttonGroup)</code></pre>
|
|||||||
|
|
||||||
<dl class="list-methods">
|
<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>
|
<dt>
|
||||||
<div class="nameContainer">
|
<div class="nameContainer">
|
||||||
<h4 class="name" id="hide">
|
<h4 class="name" id="hide">
|
||||||
@ -2889,7 +3261,7 @@ app.scene.addChild(buttonGroup)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2994,7 +3366,7 @@ app.scene.addChild(buttonGroup)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3099,7 +3471,7 @@ app.scene.addChild(buttonGroup)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3206,7 +3578,7 @@ app.scene.addChild(buttonGroup)</code></pre>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1922,7 +1928,7 @@ Adds a PIXI.Container if necessary.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2000,7 +2006,7 @@ rect.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2152,7 +2158,7 @@ rect.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2228,7 +2234,7 @@ rect.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2372,7 +2378,7 @@ rect.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2547,7 +2553,7 @@ rect.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2668,7 +2674,7 @@ rect.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2746,7 +2752,7 @@ the also overwritten _calculateBounds method.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2921,7 +2927,7 @@ the also overwritten _calculateBounds method.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2997,7 +3003,7 @@ the also overwritten _calculateBounds method.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3073,7 +3079,7 @@ the also overwritten _calculateBounds method.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3150,7 +3156,7 @@ visible quadTrees</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3272,7 +3278,7 @@ be reused.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3348,7 +3354,7 @@ be reused.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3469,7 +3475,7 @@ be reused.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3620,7 +3626,7 @@ a new Tiles layer if necessary</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3741,7 +3747,7 @@ a new Tiles layer if necessary</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3862,7 +3868,7 @@ a new Tiles layer if necessary</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4076,7 +4082,7 @@ a new Tiles layer if necessary</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4220,7 +4226,7 @@ a new Tiles layer if necessary</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4413,7 +4419,7 @@ Optional parameter:</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4560,7 +4566,7 @@ layer.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4690,7 +4696,7 @@ Can be overwritten in subclasses.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4796,7 +4802,7 @@ large images.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4872,7 +4878,7 @@ large images.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -5090,7 +5096,7 @@ i.e. after loading a single tile</p></td>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1781,7 +1787,7 @@ height and width of the overall image, overlap, and image type.</p></div>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1931,7 +1937,7 @@ height and width of the overall image, overlap, and image type.</p></div>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2081,7 +2087,7 @@ height and width of the overall image, overlap, and image type.</p></div>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2231,7 +2237,7 @@ height and width of the overall image, overlap, and image type.</p></div>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2405,7 +2411,7 @@ on completion.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2603,7 +2609,7 @@ on completion.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2506,7 +2512,7 @@ front.on('click', event => flippable.toggle())</code></pre>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1755,7 +1761,7 @@
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2069,7 +2075,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_popup.js.html#line148">popup.js:148</a>
|
<a href="pixi_popup.js.html#line134">popup.js:134</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2178,7 +2184,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
|
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2337,7 +2343,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1555,7 +1561,7 @@
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1571,7 +1577,7 @@ resuse and place labels across different layout variants</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1647,7 +1653,7 @@ resuse and place labels across different layout variants</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1723,7 +1729,7 @@ resuse and place labels across different layout variants</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1996,7 +2002,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_labeledgraphics.js.html#line330">labeledgraphics.js:330</a>
|
<a href="pixi_labeledgraphics.js.html#line309">labeledgraphics.js:309</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2146,7 +2152,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_labeledgraphics.js.html#line339">labeledgraphics.js:339</a>
|
<a href="pixi_labeledgraphics.js.html#line318">labeledgraphics.js:318</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2267,7 +2273,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_labeledgraphics.js.html#line351">labeledgraphics.js:351</a>
|
<a href="pixi_labeledgraphics.js.html#line330">labeledgraphics.js:330</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2388,7 +2394,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_labeledgraphics.js.html#line281">labeledgraphics.js:281</a>
|
<a href="pixi_labeledgraphics.js.html#line270">labeledgraphics.js:270</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2620,7 +2626,7 @@ than wanted</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2201,7 +2207,7 @@ app.scene.addChild(list)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2306,7 +2312,7 @@ app.scene.addChild(list)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2427,7 +2433,7 @@ app.scene.addChild(list)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2579,7 +2585,7 @@ app.scene.addChild(list)</code></pre>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2435,7 +2441,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2229,7 +2235,7 @@ a string or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2336,7 +2342,7 @@ a string or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2316,7 +2322,7 @@ const app = new PIXIApp({
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2423,7 +2429,7 @@ const app = new PIXIApp({
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2552,7 +2558,7 @@ handler for the orientationchange event.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2749,7 +2755,7 @@ to browser page coordinates.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2946,7 +2952,7 @@ to local DisplayObject coordinates.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3023,7 +3029,7 @@ to the layout method.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3188,7 +3194,7 @@ to the layout method.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3347,7 +3353,7 @@ adapt their layout to the new app size.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3680,7 +3686,7 @@ renderer resolution?</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4013,7 +4019,7 @@ renderer resolution?</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4170,7 +4176,7 @@ renderer resolution?</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4327,7 +4333,7 @@ renderer resolution?</p></td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4528,7 +4534,7 @@ rejected with an error.</td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4633,7 +4639,7 @@ rejected with an error.</td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4769,7 +4775,7 @@ rejected with an error.</td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4930,7 +4936,7 @@ called without a parameter.</td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -5131,7 +5137,7 @@ rejected with an error.</td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -5428,7 +5434,7 @@ rejected with an error.</td>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -5534,7 +5540,7 @@ Overwrite this method if you need additonal views and components.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_app.js.html#line652">app.js:652</a>
|
<a href="pixi_app.js.html#line612">app.js:612</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -5737,7 +5743,7 @@ rejected with an error.</td>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1901,7 +1907,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
|
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2062,7 +2068,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_popup.js.html#line148">popup.js:148</a>
|
<a href="pixi_popup.js.html#line134">popup.js:134</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2171,7 +2177,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
|
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2330,7 +2336,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2116,7 +2122,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_popup.js.html#line148">popup.js:148</a>
|
<a href="pixi_popup.js.html#line134">popup.js:134</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2225,7 +2231,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
|
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2384,7 +2390,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2762,7 +2768,7 @@ app.scene.addChild(progress)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2869,7 +2875,7 @@ app.scene.addChild(progress)</code></pre>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2748,7 +2754,7 @@ app.scene.addChild(slider)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2853,7 +2859,7 @@ app.scene.addChild(slider)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2960,7 +2966,7 @@ app.scene.addChild(slider)</code></pre>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3178,7 +3184,7 @@ app.scene.addChild(switch1)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3283,7 +3289,7 @@ app.scene.addChild(switch1)</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3390,7 +3396,7 @@ app.scene.addChild(switch1)</code></pre>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1684,7 +1690,7 @@
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3159,7 +3165,7 @@ const app = new PIXIApp({
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1580,7 +1586,7 @@ const app = new PIXIApp({
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1592,7 +1598,7 @@ const app = new PIXIApp({
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1592,7 +1598,7 @@ const app = new PIXIApp({
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1676,7 +1682,7 @@ the memory pressure.</p></div>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1844,7 +1850,7 @@ and west flags to address nw, ne, sw, and se.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1921,7 +1927,7 @@ an indicator of tiles to free.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2044,7 +2050,7 @@ an indicator of tiles to free.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2238,7 +2244,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line192">abstractpopup.js:192</a>
|
<a href="pixi_abstractpopup.js.html#line184">abstractpopup.js:184</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2347,7 +2353,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<div class="tag-source">
|
||||||
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
|
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2506,7 +2512,7 @@ a string, a number or a PIXI.Text object.</p>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2596,7 +2602,7 @@ test.start()</code></pre>
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -4177,7 +4183,7 @@ test.start()</code></pre>
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1943,7 +1949,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -2231,7 +2237,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="tag-source">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -3314,7 +3320,7 @@
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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) {
|
if (this.opts.maxWidth) {
|
||||||
this.headerStyle.wordWrap = true
|
this.headerStyle.wordWrap = true
|
||||||
this.headerStyle.wordWrapWidth =
|
this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
|
||||||
this.opts.maxWidth - 2 * this.opts.padding
|
|
||||||
|
|
||||||
this.textStyle.wordWrap = true
|
this.textStyle.wordWrap = true
|
||||||
this.textStyle.wordWrapWidth =
|
this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
|
||||||
this.opts.maxWidth - 2 * this.opts.padding
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.alpha = 0
|
this.alpha = 0
|
||||||
@ -1571,10 +1575,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
if (this.opts.header instanceof PIXI.Text) {
|
if (this.opts.header instanceof PIXI.Text) {
|
||||||
header = this.opts.header
|
header = this.opts.header
|
||||||
} else if (typeof this.opts.header === 'number') {
|
} else if (typeof this.opts.header === 'number') {
|
||||||
header = new PIXI.Text(
|
header = new PIXI.Text(this.opts.header.toString(), this.headerStyle)
|
||||||
this.opts.header.toString(),
|
|
||||||
this.headerStyle
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
header = new PIXI.Text(this.opts.header, this.headerStyle)
|
header = new PIXI.Text(this.opts.header, this.headerStyle)
|
||||||
}
|
}
|
||||||
@ -1601,10 +1602,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
if (typeof this.opts.content === 'string') {
|
if (typeof this.opts.content === 'string') {
|
||||||
content = new PIXI.Text(this.opts.content, this.textStyle)
|
content = new PIXI.Text(this.opts.content, this.textStyle)
|
||||||
} else if (typeof this.opts.content === 'number') {
|
} else if (typeof this.opts.content === 'number') {
|
||||||
content = new PIXI.Text(
|
content = new PIXI.Text(this.opts.content.toString(), this.textStyle)
|
||||||
this.opts.content.toString(),
|
|
||||||
this.textStyle
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
content = this.opts.content
|
content = this.opts.content
|
||||||
}
|
}
|
||||||
@ -1675,31 +1673,16 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||||
*/
|
*/
|
||||||
draw() {
|
draw() {
|
||||||
const square =
|
const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
||||||
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
|
||||||
const diameter = Math.round(this.opts.radius * 2)
|
const diameter = Math.round(this.opts.radius * 2)
|
||||||
|
|
||||||
this.clear()
|
this.clear()
|
||||||
this.lineStyle(
|
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
if (square && diameter === this.wantedWidth) {
|
if (square && diameter === this.wantedWidth) {
|
||||||
this.drawCircle(
|
this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
|
||||||
this.wantedWidth / 2,
|
|
||||||
this.wantedHeight / 2,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.drawRoundedRect(
|
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this.wantedWidth,
|
|
||||||
this.wantedHeight,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
this.endFill()
|
this.endFill()
|
||||||
|
|
||||||
@ -1825,7 +1808,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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 dy = 0
|
||||||
let canvas = this.renderer.view
|
let canvas = this.renderer.view
|
||||||
let context = canvas.getContext('webgl')
|
let context = canvas.getContext('webgl')
|
||||||
if (
|
if (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) {
|
||||||
context.drawingBufferWidth < canvas.width ||
|
|
||||||
context.drawingBufferHeight < canvas.height
|
|
||||||
) {
|
|
||||||
extendWidth = context.drawingBufferWidth / canvas.width
|
extendWidth = context.drawingBufferWidth / canvas.width
|
||||||
extendHeight = context.drawingBufferHeight / canvas.height
|
extendHeight = context.drawingBufferHeight / canvas.height
|
||||||
//dx = wantedWidth - context.drawingBufferWidth
|
//dx = wantedWidth - context.drawingBufferWidth
|
||||||
@ -1583,10 +1586,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
console.log('App is in fullScreen mode or autoResize mode')
|
console.log('App is in fullScreen mode or autoResize mode')
|
||||||
const resizeDebounced = debounce(event => this.resize(event), 50)
|
const resizeDebounced = debounce(event => this.resize(event), 50)
|
||||||
window.addEventListener('resize', resizeDebounced)
|
window.addEventListener('resize', resizeDebounced)
|
||||||
document.body.addEventListener(
|
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
|
||||||
'orientationchange',
|
|
||||||
this.checkOrientation.bind(this)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
if (monkeyPatchMapping) {
|
if (monkeyPatchMapping) {
|
||||||
console.log('Using monkey patched coordinate mapping')
|
console.log('Using monkey patched coordinate mapping')
|
||||||
@ -1617,18 +1617,12 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
uri: '/graphql'
|
uri: '/graphql'
|
||||||
})
|
})
|
||||||
|
|
||||||
const wsClient = new subscriptions.SubscriptionClient(
|
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
|
||||||
`wss://${location.hostname}/subscriptions`,
|
|
||||||
{
|
|
||||||
reconnect: true,
|
reconnect: true,
|
||||||
connectionParams: {}
|
connectionParams: {}
|
||||||
}
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
|
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
|
||||||
networkInterface,
|
|
||||||
wsClient
|
|
||||||
)
|
|
||||||
|
|
||||||
this.apolloClient = new apollo.ApolloClient({
|
this.apolloClient = new apollo.ApolloClient({
|
||||||
networkInterface: networkInterfaceWithSubscriptions
|
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.
|
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
|
||||||
* @return {PIXIApp} - Returns the PIXIApp for chaining.
|
* @return {PIXIApp} - Returns the PIXIApp for chaining.
|
||||||
*/
|
*/
|
||||||
resize(
|
resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
|
||||||
event,
|
|
||||||
{ width = window.innerWidth, height = window.innerHeight } = {}
|
|
||||||
) {
|
|
||||||
this.width = width
|
this.width = width
|
||||||
this.height = height
|
this.height = height
|
||||||
this.expandRenderer()
|
this.expandRenderer()
|
||||||
@ -1788,8 +1779,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
monkeyPatchPixiMapping() {
|
monkeyPatchPixiMapping() {
|
||||||
if (this.originalMapPositionToPoint === null) {
|
if (this.originalMapPositionToPoint === null) {
|
||||||
let interactionManager = this.renderer.plugins.interaction
|
let interactionManager = this.renderer.plugins.interaction
|
||||||
this.originalMapPositionToPoint =
|
this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
|
||||||
interactionManager.mapPositionToPoint
|
|
||||||
interactionManager.mapPositionToPoint = (point, x, y) => {
|
interactionManager.mapPositionToPoint = (point, x, y) => {
|
||||||
return this.fixedMapPositionToPoint(point, x, y)
|
return this.fixedMapPositionToPoint(point, x, y)
|
||||||
}
|
}
|
||||||
@ -1818,8 +1808,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
|
|
||||||
if (
|
if (
|
||||||
context !== null &&
|
context !== null &&
|
||||||
(context.drawingBufferWidth < canvas.width ||
|
(context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height)
|
||||||
context.drawingBufferHeight < canvas.height)
|
|
||||||
) {
|
) {
|
||||||
extendWidth = context.drawingBufferWidth / canvas.width
|
extendWidth = context.drawingBufferWidth / canvas.width
|
||||||
extendHeight = context.drawingBufferHeight / canvas.height
|
extendHeight = context.drawingBufferHeight / canvas.height
|
||||||
@ -1828,12 +1817,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
}
|
}
|
||||||
x *= extendWidth
|
x *= extendWidth
|
||||||
y *= extendHeight
|
y *= extendHeight
|
||||||
return this.originalMapPositionToPoint.call(
|
return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
|
||||||
interactionManager,
|
|
||||||
local,
|
|
||||||
x,
|
|
||||||
y + dy
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -1884,9 +1868,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
* @return {Modal} Returns the Modal object.
|
* @return {Modal} Returns the Modal object.
|
||||||
*/
|
*/
|
||||||
modal(opts = {}) {
|
modal(opts = {}) {
|
||||||
let modal = new Modal(
|
let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
|
||||||
Object.assign({ theme: this.theme }, opts, { app: this })
|
|
||||||
)
|
|
||||||
this.scene.addChild(modal)
|
this.scene.addChild(modal)
|
||||||
|
|
||||||
return modal
|
return modal
|
||||||
@ -1899,9 +1881,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
* @return {Message} Returns the Message object.
|
* @return {Message} Returns the Message object.
|
||||||
*/
|
*/
|
||||||
message(opts = {}) {
|
message(opts = {}) {
|
||||||
let message = new Message(
|
let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
|
||||||
Object.assign({ theme: this.theme }, opts, { app: this })
|
|
||||||
)
|
|
||||||
this.scene.addChild(message)
|
this.scene.addChild(message)
|
||||||
|
|
||||||
return message
|
return message
|
||||||
@ -1920,11 +1900,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
|
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
|
||||||
* @return {PIXIApp} The PIXIApp object for chaining.
|
* @return {PIXIApp} The PIXIApp object for chaining.
|
||||||
*/
|
*/
|
||||||
loadSprites(
|
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
|
||||||
resources,
|
|
||||||
loaded = null,
|
|
||||||
{ resolutionDependent = true, progress = false } = {}
|
|
||||||
) {
|
|
||||||
this.loadTextures(
|
this.loadTextures(
|
||||||
resources,
|
resources,
|
||||||
textures => {
|
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?
|
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
|
||||||
* @return {PIXIApp} The PIXIApp object for chaining.
|
* @return {PIXIApp} The PIXIApp object for chaining.
|
||||||
*/
|
*/
|
||||||
loadTextures(
|
loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
|
||||||
resources,
|
|
||||||
loaded = null,
|
|
||||||
{ resolutionDependent = true, progress = false } = {}
|
|
||||||
) {
|
|
||||||
if (!Array.isArray(resources)) {
|
if (!Array.isArray(resources)) {
|
||||||
resources = [resources]
|
resources = [resources]
|
||||||
}
|
}
|
||||||
@ -1974,16 +1946,10 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
let resolution = Math.round(this.renderer.resolution)
|
let resolution = Math.round(this.renderer.resolution)
|
||||||
switch (resolution) {
|
switch (resolution) {
|
||||||
case 2:
|
case 2:
|
||||||
loader.add(
|
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
|
||||||
resource,
|
|
||||||
resource.replace(/\.([^.]*)$/, '@2x.$1')
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
case 3:
|
case 3:
|
||||||
loader.add(
|
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
|
||||||
resource,
|
|
||||||
resource.replace(/\.([^.]*)$/, '@3x.$1')
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
loader.add(resource)
|
loader.add(resource)
|
||||||
@ -2148,11 +2114,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
pixiGlobal.x *= resolution
|
pixiGlobal.x *= resolution
|
||||||
pixiGlobal.y *= resolution
|
pixiGlobal.y *= resolution
|
||||||
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
|
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
|
||||||
return window.convertPointFromNodeToPage(
|
return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
|
||||||
app.view,
|
|
||||||
pixiGlobal.x,
|
|
||||||
pixiGlobal.y
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2227,7 +2189,7 @@ class FpsDisplay extends PIXI.Graphics {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
content: this.opts.tooltip
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip = Object.assign(
|
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||||
{},
|
|
||||||
{ object: this },
|
|
||||||
this.opts.tooltip
|
|
||||||
)
|
|
||||||
this.tooltip = new Tooltip(this.opts.tooltip)
|
this.tooltip = new Tooltip(this.opts.tooltip)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1548,12 +1550,8 @@ export default class Badge extends AbstractPopup {
|
|||||||
layout() {
|
layout() {
|
||||||
super.layout()
|
super.layout()
|
||||||
|
|
||||||
this.content.x =
|
this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
|
||||||
this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
|
this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
|
||||||
this.content.y =
|
|
||||||
this.height / 2 -
|
|
||||||
this.content.height / 2 -
|
|
||||||
this.opts.strokeWidth / 2
|
|
||||||
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
@ -1571,7 +1569,7 @@ export default class Badge extends AbstractPopup {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
return this.tiltShiftXFilter.shape
|
||||||
}
|
}
|
||||||
set shape(value) {
|
set shape(value) {
|
||||||
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
|
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value)
|
||||||
value
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -1629,12 +1633,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||||||
this.uniforms.circle = [shape.x, shape.y, shape.r]
|
this.uniforms.circle = [shape.x, shape.y, shape.r]
|
||||||
} else {
|
} else {
|
||||||
this.uniforms.shape = 2
|
this.uniforms.shape = 2
|
||||||
this.uniforms.rectangle = [
|
this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height]
|
||||||
shape.x,
|
|
||||||
shape.y,
|
|
||||||
shape.x + shape.width,
|
|
||||||
shape.y + shape.height
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
this.uniforms.blur = blur
|
this.uniforms.blur = blur
|
||||||
this.uniforms.delta = new PIXI.Point(0, 0)
|
this.uniforms.delta = new PIXI.Point(0, 0)
|
||||||
@ -1668,12 +1667,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||||||
return new PIXI.Circle(circle[0], circle[1], circle[2])
|
return new PIXI.Circle(circle[0], circle[1], circle[2])
|
||||||
} else {
|
} else {
|
||||||
const rectangle = this.uniforms.rectangle
|
const rectangle = this.uniforms.rectangle
|
||||||
return new PIXI.Rectangle(
|
return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
|
||||||
rectangle[0],
|
|
||||||
rectangle[1],
|
|
||||||
rectangle[2],
|
|
||||||
rectangle[3]
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
set shape(value) {
|
set shape(value) {
|
||||||
@ -1682,12 +1676,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||||||
this.uniforms.circle = [value.x, value.y, value.r]
|
this.uniforms.circle = [value.x, value.y, value.r]
|
||||||
} else {
|
} else {
|
||||||
this.uniforms.shape = 2
|
this.uniforms.shape = 2
|
||||||
this.uniforms.rectangle = [
|
this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height]
|
||||||
value.x,
|
|
||||||
value.y,
|
|
||||||
value.x + value.width,
|
|
||||||
value.y + value.height
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1738,7 +1727,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
||||||
@ -1438,11 +1444,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<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 Theme from './theme.js'
|
||||||
import Tooltip from './tooltip.js'
|
import Tooltip from './tooltip.js'
|
||||||
import Badge from './badge.js'
|
import Badge from './badge.js'
|
||||||
import Events from '../events.js'
|
import Events from '../events.js'
|
||||||
|
import { Points } from '../utils.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Callback for the button action.
|
* Callback for the button action.
|
||||||
@ -1575,8 +1582,8 @@ export default class Button extends PIXI.Container {
|
|||||||
strokeActive: theme.strokeActive,
|
strokeActive: theme.strokeActive,
|
||||||
strokeActiveWidth: theme.strokeActiveWidth,
|
strokeActiveWidth: theme.strokeActiveWidth,
|
||||||
strokeActiveAlpha: theme.strokeActiveAlpha,
|
strokeActiveAlpha: theme.strokeActiveAlpha,
|
||||||
textStyle: theme.textStyle,
|
textStyle: {},
|
||||||
textStyleActive: theme.textStyleActive,
|
textStyleActive: {},
|
||||||
style: 'default',
|
style: 'default',
|
||||||
radius: theme.radius,
|
radius: theme.radius,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
@ -1596,15 +1603,12 @@ export default class Button extends PIXI.Container {
|
|||||||
|
|
||||||
this.id = this.opts.id
|
this.id = this.opts.id
|
||||||
|
|
||||||
if (
|
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
|
||||||
typeof this.opts.icon === 'undefined' &&
|
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
|
||||||
typeof this.opts.iconActive !== 'undefined'
|
|
||||||
) {
|
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
|
||||||
this.opts.icon = this.opts.iconActive
|
this.opts.icon = this.opts.iconActive
|
||||||
} else if (
|
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
|
||||||
typeof this.opts.icon !== 'undefined' &&
|
|
||||||
typeof this.opts.iconActive === 'undefined'
|
|
||||||
) {
|
|
||||||
this.opts.iconActive = this.opts.icon
|
this.opts.iconActive = this.opts.icon
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1620,6 +1624,8 @@ export default class Button extends PIXI.Container {
|
|||||||
this._active = null
|
this._active = null
|
||||||
this._disabled = null
|
this._disabled = null
|
||||||
|
|
||||||
|
this.__start = { x: null, y: null }
|
||||||
|
|
||||||
this.iconInactive = null
|
this.iconInactive = null
|
||||||
this.iconActive = null
|
this.iconActive = null
|
||||||
this.text = null
|
this.text = null
|
||||||
@ -1674,17 +1680,11 @@ export default class Button extends PIXI.Container {
|
|||||||
// Icon
|
// Icon
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.icon) {
|
if (this.opts.icon) {
|
||||||
this.iconInactive = this.loadIcon(
|
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
|
||||||
this.opts.icon,
|
|
||||||
this.opts.iconColor
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.opts.iconActive) {
|
if (this.opts.iconActive) {
|
||||||
this.iconActive = this.loadIcon(
|
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
|
||||||
this.opts.iconActive,
|
|
||||||
this.opts.iconColorActive
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
@ -1701,17 +1701,17 @@ export default class Button extends PIXI.Container {
|
|||||||
this.capture(e)
|
this.capture(e)
|
||||||
})
|
})
|
||||||
|
|
||||||
this.button.on('pointerout', e => {
|
this.button.on('pointerout', this.onEnd.bind(this))
|
||||||
this.capture(e)
|
this.button.on('pointercancel', this.onEnd.bind(this))
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
this.button.on('pointerupoutside', this.onEnd.bind(this))
|
||||||
alpha: 1,
|
this.button.on('pointertap', this.onEnd.bind(this))
|
||||||
overwrite: 'none'
|
this.button.on('scroll', this.onEnd.bind(this))
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
this.button.on('pointerdown', e => {
|
this.button.on('pointerdown', e => {
|
||||||
//this.capture(e)
|
//this.capture(e)
|
||||||
|
this.__start.x = e.data.global.x
|
||||||
|
this.__start.y = e.data.global.y
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.7,
|
alpha: 0.7,
|
||||||
overwrite: 'none'
|
overwrite: 'none'
|
||||||
@ -1720,6 +1720,10 @@ export default class Button extends PIXI.Container {
|
|||||||
|
|
||||||
this.button.on('pointerup', e => {
|
this.button.on('pointerup', e => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
|
|
||||||
|
const distance = Points.distance(e.data.global, this.__start)
|
||||||
|
|
||||||
|
if (distance < 5) {
|
||||||
if (this.opts.beforeAction) {
|
if (this.opts.beforeAction) {
|
||||||
this.opts.beforeAction.call(this, e, this)
|
this.opts.beforeAction.call(this, e, this)
|
||||||
}
|
}
|
||||||
@ -1740,6 +1744,7 @@ export default class Button extends PIXI.Container {
|
|||||||
if (this.opts.afterAction) {
|
if (this.opts.afterAction) {
|
||||||
this.opts.afterAction.call(this, e, this)
|
this.opts.afterAction.call(this, e, this)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// disabled
|
// disabled
|
||||||
@ -1759,11 +1764,7 @@ export default class Button extends PIXI.Container {
|
|||||||
content: this.opts.tooltip
|
content: this.opts.tooltip
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip = Object.assign(
|
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||||
{},
|
|
||||||
{ object: this },
|
|
||||||
this.opts.tooltip
|
|
||||||
)
|
|
||||||
this.tooltip = new Tooltip(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)
|
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.addChild(badge)
|
||||||
|
|
||||||
this.badge = badge
|
this.badge = badge
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.layout()
|
||||||
|
|
||||||
// set position
|
// set position
|
||||||
//-----------------
|
//-----------------
|
||||||
this.position.set(this.opts.x, this.opts.y)
|
this.position.set(this.opts.x, this.opts.y)
|
||||||
@ -1909,6 +1878,39 @@ export default class Button extends PIXI.Container {
|
|||||||
|
|
||||||
this.icon = icon
|
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
|
// draw
|
||||||
//-----------------
|
//-----------------
|
||||||
this.draw()
|
this.draw()
|
||||||
@ -1956,8 +1958,7 @@ export default class Button extends PIXI.Container {
|
|||||||
this.content.x = (this._width - this.content.width) / 2
|
this.content.x = (this._width - this.content.width) / 2
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
this.content.x =
|
this.content.x = this._width - this.opts.padding - this.content.width
|
||||||
this._width - this.opts.padding - this.content.width
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1969,8 +1970,7 @@ export default class Button extends PIXI.Container {
|
|||||||
this.content.y = (this._height - this.content.height) / 2
|
this.content.y = (this._height - this.content.height) / 2
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
this.content.y =
|
this.content.y = this._height - this.opts.padding - this.content.height
|
||||||
this._height - this.opts.padding - this.content.height
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1986,30 +1986,13 @@ export default class Button extends PIXI.Container {
|
|||||||
draw() {
|
draw() {
|
||||||
this.button.clear()
|
this.button.clear()
|
||||||
if (this.active) {
|
if (this.active) {
|
||||||
this.button.lineStyle(
|
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||||
this.opts.strokeActiveWidth,
|
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||||
this.opts.strokeActive,
|
|
||||||
this.opts.strokeActiveAlpha
|
|
||||||
)
|
|
||||||
this.button.beginFill(
|
|
||||||
this.opts.fillActive,
|
|
||||||
this.opts.fillActiveAlpha
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.button.lineStyle(
|
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
}
|
}
|
||||||
this.button.drawRoundedRect(
|
this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this._width,
|
|
||||||
this._height,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
this.button.endFill()
|
this.button.endFill()
|
||||||
|
|
||||||
return this
|
return this
|
||||||
@ -2126,9 +2109,7 @@ export default class Button extends PIXI.Container {
|
|||||||
size = this.opts.minHeight - 2 * this.opts.padding
|
size = this.opts.minHeight - 2 * this.opts.padding
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = Button.iconIsUrl(icon)
|
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
|
||||||
? icon
|
|
||||||
: `../../assets/icons/${icon}.png`
|
|
||||||
const iconTexture = PIXI.Texture.fromImage(url, true)
|
const iconTexture = PIXI.Texture.fromImage(url, true)
|
||||||
|
|
||||||
const sprite = new PIXI.Sprite(iconTexture)
|
const sprite = new PIXI.Sprite(iconTexture)
|
||||||
@ -2168,6 +2149,14 @@ export default class Button extends PIXI.Container {
|
|||||||
this.icon.tint = value
|
this.icon.tint = value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onEnd(event) {
|
||||||
|
this.capture(event)
|
||||||
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
|
alpha: 1,
|
||||||
|
overwrite: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
</article>
|
</article>
|
||||||
@ -2182,7 +2171,7 @@ export default class Button extends PIXI.Container {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
||||||
@ -1438,8 +1444,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
|
<pre id="source-code" class="prettyprint source linenums"><code>/* globals ThrowPropsPlugin, Strong */
|
||||||
|
|
||||||
|
import Theme from './theme.js'
|
||||||
import Button from './button.js'
|
import Button from './button.js'
|
||||||
|
import Events from '../events.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class that represents a PixiJS ButtonGroup.
|
* 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 http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
|
||||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
|
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
|
||||||
*/
|
*/
|
||||||
export default class ButtonGroup extends PIXI.Graphics {
|
export default class ButtonGroup extends PIXI.Container {
|
||||||
/**
|
/**
|
||||||
* Creates an instance of a ButtonGroup.
|
* Creates an instance of a ButtonGroup.
|
||||||
*
|
*
|
||||||
@ -1479,6 +1488,10 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
* or a Theme object.
|
* or a Theme object.
|
||||||
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
|
* @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.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.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 {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.
|
* @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: [],
|
buttons: [],
|
||||||
minWidth: 44,
|
minWidth: 44,
|
||||||
minHeight: 44,
|
minHeight: 44,
|
||||||
|
maxWidth: null,
|
||||||
|
maxHeight: null,
|
||||||
|
stackPadding: 10,
|
||||||
|
app: window.app,
|
||||||
padding: theme.padding,
|
padding: theme.padding,
|
||||||
margin: theme.margin,
|
margin: theme.margin,
|
||||||
iconPosition: 'left', // left, right
|
iconPosition: 'left', // left, right
|
||||||
@ -1542,8 +1559,8 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
strokeActive: theme.strokeActive,
|
strokeActive: theme.strokeActive,
|
||||||
strokeActiveWidth: theme.strokeActiveWidth,
|
strokeActiveWidth: theme.strokeActiveWidth,
|
||||||
strokeActiveAlpha: theme.strokeActiveAlpha,
|
strokeActiveAlpha: theme.strokeActiveAlpha,
|
||||||
textStyle: theme.textStyle,
|
textStyle: {},
|
||||||
textStyleActive: theme.textStyleActive,
|
textStyleActive: {},
|
||||||
style: 'default',
|
style: 'default',
|
||||||
radius: theme.radius,
|
radius: theme.radius,
|
||||||
disabled: null,
|
disabled: null,
|
||||||
@ -1556,9 +1573,13 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
|
||||||
|
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
|
||||||
|
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
|
||||||
|
|
||||||
this.buttons = []
|
this.buttons = []
|
||||||
|
|
||||||
this._disabled = null
|
this._disabled = null
|
||||||
|
this.__dragging = false
|
||||||
|
|
||||||
this.visible = this.opts.visible
|
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.
|
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||||
*/
|
*/
|
||||||
setup() {
|
setup() {
|
||||||
|
// inner container
|
||||||
|
//--------------------
|
||||||
|
const container = new PIXI.Graphics()
|
||||||
|
this.addChild(container)
|
||||||
|
this.container = container
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
//-----------------
|
//-----------------
|
||||||
let position = 0
|
let position = 0
|
||||||
|
let index = 0
|
||||||
|
|
||||||
for (let it of this.opts.buttons) {
|
for (let it of this.opts.buttons) {
|
||||||
delete it.x
|
delete it.x
|
||||||
@ -1604,19 +1632,11 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
it.fillActive = it.fillActive || this.opts.fillActive
|
it.fillActive = it.fillActive || this.opts.fillActive
|
||||||
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
|
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
|
||||||
it.stroke = it.stroke || this.opts.stroke
|
it.stroke = it.stroke || this.opts.stroke
|
||||||
it.strokeWidth =
|
it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
|
||||||
it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
|
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
|
||||||
it.strokeAlpha =
|
|
||||||
it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
|
|
||||||
it.strokeActive = it.strokeActive || this.opts.strokeActive
|
it.strokeActive = it.strokeActive || this.opts.strokeActive
|
||||||
it.strokeActiveWidth =
|
it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
|
||||||
it.strokeActiveWidth != null
|
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
|
||||||
? it.strokeActiveWidth
|
|
||||||
: this.opts.strokeActiveWidth
|
|
||||||
it.strokeActiveAlpha =
|
|
||||||
it.strokeActiveAlpha != null
|
|
||||||
? it.strokeActiveAlpha
|
|
||||||
: this.opts.strokeActiveAlpha
|
|
||||||
it.textStyle = it.textStyle || this.opts.textStyle
|
it.textStyle = it.textStyle || this.opts.textStyle
|
||||||
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
|
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
|
||||||
it.style = it.style || this.opts.style
|
it.style = it.style || this.opts.style
|
||||||
@ -1635,10 +1655,7 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
it.align = it.align || this.opts.align
|
it.align = it.align || this.opts.align
|
||||||
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
|
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
|
||||||
it.afterAction = (event, button) => {
|
it.afterAction = (event, button) => {
|
||||||
if (
|
if (this.opts.type === 'radio' && button.opts.type === 'default') {
|
||||||
this.opts.type === 'radio' &&
|
|
||||||
button.opts.type === 'default'
|
|
||||||
) {
|
|
||||||
this.buttons.forEach(it => {
|
this.buttons.forEach(it => {
|
||||||
if (it.opts.type === 'default') {
|
if (it.opts.type === 'default') {
|
||||||
it.active = false
|
it.active = false
|
||||||
@ -1655,23 +1672,24 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
if (typeof it.tooltip === 'string') {
|
if (typeof it.tooltip === 'string') {
|
||||||
it.tooltip = { content: it.tooltip, container: this }
|
it.tooltip = { content: it.tooltip, container: this }
|
||||||
} else {
|
} else {
|
||||||
it.tooltip = Object.assign(
|
it.tooltip = Object.assign({}, { container: this }, it.tooltip)
|
||||||
{},
|
|
||||||
{ container: this },
|
|
||||||
it.tooltip
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let button = new Button(it)
|
let button = new Button(it)
|
||||||
|
|
||||||
this.addChild(button)
|
this.container.addChild(button)
|
||||||
this.buttons.push(button)
|
this.buttons.push(button)
|
||||||
|
|
||||||
position +=
|
button.__originalPosition = {
|
||||||
(this.opts.orientation === 'horizontal'
|
x: button.x,
|
||||||
? button.width
|
y: button.y
|
||||||
: button.height) + this.opts.margin
|
}
|
||||||
|
|
||||||
|
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
|
||||||
|
|
||||||
|
button.__initIndex = index
|
||||||
|
index++
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.opts.orientation === 'vertical') {
|
if (this.opts.orientation === 'vertical') {
|
||||||
@ -1689,6 +1707,43 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
this.disabled = this.opts.disabled
|
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
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1706,6 +1761,12 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
//-----------------
|
//-----------------
|
||||||
this.draw()
|
this.draw()
|
||||||
|
|
||||||
|
// stack
|
||||||
|
//-----------------
|
||||||
|
if (this.opts.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
|
||||||
|
this.stack()
|
||||||
|
}
|
||||||
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1719,41 +1780,27 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
if (this.opts.margin === 0) {
|
if (this.opts.margin === 0) {
|
||||||
this.buttons.forEach(it => it.hide())
|
this.buttons.forEach(it => it.hide())
|
||||||
|
|
||||||
this.clear()
|
this.container.clear()
|
||||||
this.lineStyle(
|
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
this.opts.stroke,
|
this.container.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
|
||||||
this.drawRoundedRect(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this.width,
|
|
||||||
this.height,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
|
|
||||||
// Draw borders
|
// Draw borders
|
||||||
this.lineStyle(
|
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha / 2
|
|
||||||
)
|
|
||||||
|
|
||||||
this.buttons.forEach((it, i) => {
|
this.buttons.forEach((it, i) => {
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
this.moveTo(it.x, it.y)
|
this.container.moveTo(it.x, it.y)
|
||||||
|
|
||||||
if (this.opts.orientation === 'horizontal') {
|
if (this.opts.orientation === 'horizontal') {
|
||||||
this.lineTo(it.x, it.height)
|
this.container.lineTo(it.x, it.height)
|
||||||
} else {
|
} else {
|
||||||
this.lineTo(it.width, it.y)
|
this.container.lineTo(it.width, it.y)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this.endFill()
|
this.container.endFill()
|
||||||
}
|
}
|
||||||
|
|
||||||
return this
|
return this
|
||||||
@ -1774,6 +1821,34 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
this.buttons.forEach(it => (it.disabled = value))
|
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.
|
* 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
|
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))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
</article>
|
</article>
|
||||||
@ -1821,7 +2174,7 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
||||||
@ -1480,8 +1486,7 @@ export class DeepZoomInfo {
|
|||||||
// number in the file system for the folder with tiles
|
// number in the file system for the folder with tiles
|
||||||
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
|
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
|
||||||
this.type = this.type || 'dzi'
|
this.type = this.type || 'dzi'
|
||||||
this.urlTileTemplate =
|
this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
|
||||||
this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
|
|
||||||
this.setupDimensions()
|
this.setupDimensions()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1671,15 +1676,7 @@ export class DeepZoomInfo {
|
|||||||
test() {
|
test() {
|
||||||
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
|
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
|
||||||
for (let i = 0; i <= this.maxLevel; i++) {
|
for (let i = 0; i <= this.maxLevel; i++) {
|
||||||
console.log(
|
console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
|
||||||
' ' +
|
|
||||||
i +
|
|
||||||
' -> ' +
|
|
||||||
this.getScale(i) +
|
|
||||||
' [' +
|
|
||||||
this.dimensions(i) +
|
|
||||||
']'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
console.log(this.urlForTile(this.baseLevel, 0, 0))
|
console.log(this.urlForTile(this.baseLevel, 0, 0))
|
||||||
}
|
}
|
||||||
@ -1719,12 +1716,7 @@ class TileQuadNode {
|
|||||||
**/
|
**/
|
||||||
noQuads() {
|
noQuads() {
|
||||||
if (this.previous === null) return false
|
if (this.previous === null) return false
|
||||||
return (
|
return this.nw === null && this.ne === null && this.sw === null && this.se === null
|
||||||
this.nw === null &&
|
|
||||||
this.ne === null &&
|
|
||||||
this.sw === null &&
|
|
||||||
this.se === null
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Unlink the given quad node
|
/** 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
|
* 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
|
* of tile layers for each zoom level. This gives the user the impression that
|
||||||
@ -1796,9 +1787,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
this.shadow = shadow
|
this.shadow = shadow
|
||||||
this.world = world
|
this.world = world
|
||||||
this.useWorker = useWorker
|
this.useWorker = useWorker
|
||||||
this.resolution = highResolution
|
this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
|
||||||
? Math.round(window.devicePixelRatio)
|
|
||||||
: 1
|
|
||||||
this.alpha = alpha
|
this.alpha = alpha
|
||||||
this.fastLoads = 0
|
this.fastLoads = 0
|
||||||
this.active = true
|
this.active = true
|
||||||
@ -1988,7 +1977,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
**/
|
**/
|
||||||
get maxScale() {
|
get maxScale() {
|
||||||
let delta = this.info.maxLevel - this.info.baseLevel
|
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.
|
/** Getter for the current width.
|
||||||
@ -2003,7 +1992,6 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
return this.pixelSize[1]
|
return this.pixelSize[1]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Overrides PIXI.Container.hitArea()
|
/* Overrides PIXI.Container.hitArea()
|
||||||
* Allows to optimize the hit testing. Container with hit areas are directly
|
* Allows to optimize the hit testing. Container with hit areas are directly
|
||||||
* hit tested without consideration of children.
|
* hit tested without consideration of children.
|
||||||
@ -2111,11 +2099,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
let topLeft = tiles.toLocal(worldTopLeft)
|
let topLeft = tiles.toLocal(worldTopLeft)
|
||||||
let bottomRight = tiles.toLocal(worldBottomRight)
|
let bottomRight = tiles.toLocal(worldBottomRight)
|
||||||
tiles._centerPoint = tilesCenter
|
tiles._centerPoint = tilesCenter
|
||||||
let bounds = new PIXI.Rectangle(
|
let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
|
||||||
topLeft.x,
|
|
||||||
topLeft.y,
|
|
||||||
bottomRight.x - topLeft.x,
|
|
||||||
bottomRight.y - topLeft.y)
|
|
||||||
|
|
||||||
tiles._boundsRect = bounds
|
tiles._boundsRect = bounds
|
||||||
|
|
||||||
@ -2160,9 +2144,6 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
return { centerCol, centerRow, needed }
|
return { centerCol, centerRow, needed }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** Returns all changed tiles for a given level.
|
/** Returns all changed tiles for a given level.
|
||||||
* @param {Tiles} tiles - the grid of tiles
|
* @param {Tiles} tiles - the grid of tiles
|
||||||
* @param {number} level - The zoom level of the grid
|
* @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
|
* @param {PIXI.Point} about - point of interaction
|
||||||
*/
|
*/
|
||||||
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
|
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
|
||||||
if (tiles.isComplete())
|
if (tiles.isComplete()) return
|
||||||
return
|
|
||||||
let referenceCol = -1
|
let referenceCol = -1
|
||||||
let referenceRow = -1
|
let referenceRow = -1
|
||||||
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
|
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
|
||||||
@ -2227,8 +2207,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
let scaledTileSize = tiles.tileSize * tiles.tileScale
|
let scaledTileSize = tiles.tileSize * tiles.tileScale
|
||||||
referenceCol = Math.floor(refPoint.x / scaledTileSize)
|
referenceCol = Math.floor(refPoint.x / scaledTileSize)
|
||||||
referenceRow = Math.floor(refPoint.y / scaledTileSize)
|
referenceRow = Math.floor(refPoint.y / scaledTileSize)
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
referenceCol = centerCol
|
referenceCol = centerCol
|
||||||
referenceRow = centerRow
|
referenceRow = centerRow
|
||||||
}
|
}
|
||||||
@ -2266,17 +2245,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
let [cols, rows, w, h] = this.info.dimensions(level)
|
let [cols, rows, w, h] = this.info.dimensions(level)
|
||||||
let increasedLevels = level - this.info.baseLevel
|
let increasedLevels = level - this.info.baseLevel
|
||||||
let invScale = Math.pow(0.5, increasedLevels)
|
let invScale = Math.pow(0.5, increasedLevels)
|
||||||
let tiles = new Tiles(
|
let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
|
||||||
level,
|
|
||||||
this,
|
|
||||||
invScale,
|
|
||||||
cols,
|
|
||||||
rows,
|
|
||||||
w,
|
|
||||||
h,
|
|
||||||
this.info.tileSize,
|
|
||||||
this.info.overlap
|
|
||||||
)
|
|
||||||
this.addTiles(key, tiles)
|
this.addTiles(key, tiles)
|
||||||
if (this.info.clip) {
|
if (this.info.clip) {
|
||||||
let rest = this.info.rests[level]
|
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
|
* Destroy tiles in all layers that are no longer needed
|
||||||
*
|
*
|
||||||
@ -2471,8 +2439,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
})
|
})
|
||||||
if (this.fastLoads == 3) {
|
if (this.fastLoads == 3) {
|
||||||
this.fastLoads = 0
|
this.fastLoads = 0
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -2545,7 +2512,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
// planes
|
||||||
//--------------------
|
//--------------------
|
||||||
this.setPlanes(
|
this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic)
|
||||||
this.opts.focus,
|
|
||||||
this.opts.near,
|
|
||||||
this.opts.far,
|
|
||||||
this.opts.orthographic
|
|
||||||
)
|
|
||||||
|
|
||||||
// flipped
|
// flipped
|
||||||
//--------------------
|
//--------------------
|
||||||
@ -1577,9 +1578,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
|
|
||||||
// shadow
|
// shadow
|
||||||
//--------------------
|
//--------------------
|
||||||
const shadow = new PIXI.projection.Sprite3d(
|
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
|
||||||
PIXI.Texture.fromImage('../../assets/images/shadow.png')
|
|
||||||
)
|
|
||||||
shadow.renderable = false
|
shadow.renderable = false
|
||||||
shadow.anchor.set(0.5)
|
shadow.anchor.set(0.5)
|
||||||
shadow.scale3d.set(0.98)
|
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,
|
y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y,
|
||||||
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
|
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
|
||||||
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
|
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
|
||||||
width: this.opts.useBackTransforms
|
width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
|
||||||
? toObject.width * 2
|
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
|
||||||
: fromObject.width * 2,
|
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
|
||||||
height: this.opts.useBackTransforms
|
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
|
||||||
? toObject.height * 2
|
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
|
||||||
: fromObject.height * 2,
|
|
||||||
rotation: this.opts.useBackTransforms
|
|
||||||
? toObject.rotation
|
|
||||||
: fromObject.rotation,
|
|
||||||
skewX: this.opts.useBackTransforms
|
|
||||||
? toObject.skew.x
|
|
||||||
: fromObject.skew.x,
|
|
||||||
skewY: this.opts.useBackTransforms
|
|
||||||
? toObject.skew.y
|
|
||||||
: fromObject.skew.y
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// set toObject end values
|
// set toObject end values
|
||||||
@ -1771,15 +1760,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
|
|
||||||
// shadow
|
// shadow
|
||||||
//--------------------
|
//--------------------
|
||||||
new TimelineMax()
|
new TimelineMax().to(shadow, half, { alpha: 0.3, ease }).to(shadow, half, { alpha: 0.7, ease })
|
||||||
.to(shadow, half, { alpha: 0.3, ease })
|
|
||||||
.to(shadow, half, { alpha: 0.7, ease })
|
|
||||||
|
|
||||||
// blurfilter
|
// blurfilter
|
||||||
//--------------------
|
//--------------------
|
||||||
new TimelineMax()
|
new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease })
|
||||||
.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 shadow = this.objects.shadow
|
||||||
const inner = this.objects.inner
|
const inner = this.objects.inner
|
||||||
|
|
||||||
inner.position3d.z =
|
inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
|
||||||
-Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
|
|
||||||
|
|
||||||
//this.objects.shadow.euler = this.objects.inner.euler
|
//this.objects.shadow.euler = this.objects.inner.euler
|
||||||
shadow.euler.x = -inner.euler.x
|
shadow.euler.x = -inner.euler.x
|
||||||
@ -1861,10 +1845,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
generateTexture(displayObject) {
|
generateTexture(displayObject) {
|
||||||
// renderTexture
|
// renderTexture
|
||||||
//--------------------
|
//--------------------
|
||||||
const renderTexture = PIXI.RenderTexture.create(
|
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
|
||||||
displayObject.width,
|
|
||||||
displayObject.height
|
|
||||||
)
|
|
||||||
|
|
||||||
// save position
|
// save position
|
||||||
const transform = [
|
const transform = [
|
||||||
@ -1925,7 +1906,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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 first = true
|
||||||
let lastPart = ''
|
let lastPart = ''
|
||||||
for (let part of parts) {
|
for (let part of parts) {
|
||||||
let partMetrics = PIXI.TextMetrics.measureText(
|
let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle)
|
||||||
part,
|
|
||||||
pixiStyle
|
|
||||||
)
|
|
||||||
if (x + partMetrics.width + space.width > width) {
|
if (x + partMetrics.width + space.width > width) {
|
||||||
newWord +=
|
newWord += (first || lastPart.endsWith('-') ? '\n' : '-\n') + part
|
||||||
(first || lastPart.endsWith('-')
|
|
||||||
? '\n'
|
|
||||||
: '-\n') + part
|
|
||||||
x = partMetrics.width
|
x = partMetrics.width
|
||||||
} else {
|
} else {
|
||||||
newWord += part
|
newWord += part
|
||||||
@ -1576,12 +1576,7 @@ class TextLabel extends PIXI.Text {
|
|||||||
* @param {canvas}
|
* @param {canvas}
|
||||||
* @memberof TextLabel
|
* @memberof TextLabel
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(text, style = null, canvas = null, { minZoom = 0.1, maxZoom = 10 } = {}) {
|
||||||
text,
|
|
||||||
style = null,
|
|
||||||
canvas = null,
|
|
||||||
{ minZoom = 0.1, maxZoom = 10 } = {}
|
|
||||||
) {
|
|
||||||
super(text, style, canvas)
|
super(text, style, canvas)
|
||||||
this.normFontSize = this.style.fontSize
|
this.normFontSize = this.style.fontSize
|
||||||
this.minZoom = minZoom
|
this.minZoom = minZoom
|
||||||
@ -1730,21 +1725,11 @@ export class LabeledGraphics extends PIXI.Graphics {
|
|||||||
const truncatedLines = lines.slice(0, maxLines)
|
const truncatedLines = lines.slice(0, maxLines)
|
||||||
const lastLine = truncatedLines[truncatedLines.length - 1]
|
const lastLine = truncatedLines[truncatedLines.length - 1]
|
||||||
const words = lastLine.split(' ')
|
const words = lastLine.split(' ')
|
||||||
const wordMetrics = PIXI.TextMetrics.measureText(
|
const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
|
||||||
`\u00A0\n...\n${words.join('\n')}`,
|
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
|
||||||
pixiStyle
|
|
||||||
)
|
|
||||||
const [
|
|
||||||
spaceLength,
|
|
||||||
dotsLength,
|
|
||||||
...wordLengths
|
|
||||||
] = wordMetrics.lineWidths
|
|
||||||
const { text: newLastLine } = wordLengths.reduce(
|
const { text: newLastLine } = wordLengths.reduce(
|
||||||
(data, wordLength, i) => {
|
(data, wordLength, i) => {
|
||||||
if (
|
if (data.length + wordLength + spaceLength >= wordWrapWidth) {
|
||||||
data.length + wordLength + spaceLength >=
|
|
||||||
wordWrapWidth
|
|
||||||
) {
|
|
||||||
return { ...data, length: wordWrapWidth }
|
return { ...data, length: wordWrapWidth }
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
@ -1870,7 +1855,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
|
||||||
@ -1438,7 +1444,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<pre id="source-code" class="prettyprint source linenums"><code>/* globals */
|
<pre id="source-code" class="prettyprint source linenums"><code>/* globals ThrowPropsPlugin, Strong */
|
||||||
|
|
||||||
/* Imports */
|
/* Imports */
|
||||||
import Events from '../events.js'
|
import Events from '../events.js'
|
||||||
@ -1548,9 +1554,7 @@ export default class List extends PIXI.Container {
|
|||||||
if (this.opts.app) {
|
if (this.opts.app) {
|
||||||
const app = this.opts.app
|
const app = this.opts.app
|
||||||
app.view.addEventListener('mousewheel', event => {
|
app.view.addEventListener('mousewheel', event => {
|
||||||
const bounds = this.mask
|
const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
|
||||||
? this.mask.getBounds()
|
|
||||||
: this.getBounds()
|
|
||||||
const x = event.clientX - app.view.getBoundingClientRect().left
|
const x = event.clientX - app.view.getBoundingClientRect().left
|
||||||
const y = event.clientY - app.view.getBoundingClientRect().top
|
const y = event.clientY - app.view.getBoundingClientRect().top
|
||||||
if (bounds.contains(x, y)) {
|
if (bounds.contains(x, y)) {
|
||||||
@ -1607,14 +1611,10 @@ export default class List extends PIXI.Container {
|
|||||||
if (this.opts.orientation === 'vertical') {
|
if (this.opts.orientation === 'vertical') {
|
||||||
switch (this.opts.align) {
|
switch (this.opts.align) {
|
||||||
case 'center':
|
case 'center':
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2))
|
||||||
it => (it.x = margin + this.width / 2 - it.width / 2)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.x = margin + this.width - it.width))
|
||||||
it => (it.x = margin + this.width - it.width)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
this.__items.forEach(it => (it.x = margin))
|
this.__items.forEach(it => (it.x = margin))
|
||||||
@ -1640,14 +1640,10 @@ export default class List extends PIXI.Container {
|
|||||||
this.__items.forEach(it => (it.y = margin))
|
this.__items.forEach(it => (it.y = margin))
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.y = margin + this.height - it.height))
|
||||||
it => (it.y = margin + this.height - it.height)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2))
|
||||||
it => (it.y = margin + this.height / 2 - it.height / 2)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1781,8 +1777,7 @@ export default class List extends PIXI.Container {
|
|||||||
{
|
{
|
||||||
throwProps,
|
throwProps,
|
||||||
ease: Strong.easeOut,
|
ease: Strong.easeOut,
|
||||||
onComplete: () =>
|
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
|
||||||
ThrowPropsPlugin.untrack(this.container.position)
|
|
||||||
},
|
},
|
||||||
0.8,
|
0.8,
|
||||||
0.4
|
0.4
|
||||||
@ -1803,20 +1798,14 @@ export default class List extends PIXI.Container {
|
|||||||
this.container.position.x -= event.deltaX
|
this.container.position.x -= event.deltaX
|
||||||
if (this.container.position.x > 0) {
|
if (this.container.position.x > 0) {
|
||||||
this.container.position.x = 0
|
this.container.position.x = 0
|
||||||
} else if (
|
} else if (this.container.position.x + this.innerWidth < this.opts.width) {
|
||||||
this.container.position.x + this.innerWidth <
|
|
||||||
this.opts.width
|
|
||||||
) {
|
|
||||||
this.container.position.x = this.opts.width - this.innerWidth
|
this.container.position.x = this.opts.width - this.innerWidth
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.container.position.y -= event.deltaY
|
this.container.position.y -= event.deltaY
|
||||||
if (this.container.position.y > 0) {
|
if (this.container.position.y > 0) {
|
||||||
this.container.position.y = 0
|
this.container.position.y = 0
|
||||||
} else if (
|
} else if (this.container.position.y + this.innerHeight < this.opts.height) {
|
||||||
this.container.position.y + this.innerHeight <
|
|
||||||
this.opts.height
|
|
||||||
) {
|
|
||||||
this.container.position.y = this.opts.height - this.innerHeight
|
this.container.position.y = this.opts.height - this.innerHeight
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1828,10 +1817,7 @@ export default class List extends PIXI.Container {
|
|||||||
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
|
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
|
||||||
*/
|
*/
|
||||||
capture(event) {
|
capture(event) {
|
||||||
const originalEvent =
|
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
|
||||||
event.data && event.data.originalEvent
|
|
||||||
? event.data.originalEvent
|
|
||||||
: event
|
|
||||||
Events.capturedBy(originalEvent, this)
|
Events.capturedBy(originalEvent, this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1848,7 +1834,7 @@ export default class List extends PIXI.Container {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
this.x = this.opts.app.size.width / 2 - this.width / 2
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
this.x =
|
this.x = this.opts.app.size.width - this.opts.margin - this.width
|
||||||
this.opts.app.size.width - this.opts.margin - this.width
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1545,8 +1550,7 @@ export default class Message extends InteractivePopup {
|
|||||||
this.y = this.opts.app.size.height / 2 - this.height / 2
|
this.y = this.opts.app.size.height / 2 - this.height / 2
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
this.y =
|
this.y = this.opts.app.size.height - this.opts.margin - this.height
|
||||||
this.opts.app.size.height - this.opts.margin - this.height
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1579,7 +1583,7 @@ export default class Message extends InteractivePopup {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
// background
|
||||||
//-----------------
|
//-----------------
|
||||||
this.background.clear()
|
this.background.clear()
|
||||||
this.background.beginFill(
|
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
|
||||||
this.opts.backgroundFill,
|
|
||||||
this.opts.backgroundFillAlpha
|
|
||||||
)
|
|
||||||
this.background.drawRect(0, 0, width, height)
|
this.background.drawRect(0, 0, width, height)
|
||||||
this.background.endFill()
|
this.background.endFill()
|
||||||
|
|
||||||
@ -1661,7 +1664,7 @@ export default class Modal extends PIXI.Container {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
// closeButton
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.closeButton) {
|
if (this.opts.closeButton) {
|
||||||
let closeButton = PIXI.Sprite.fromImage(
|
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
|
||||||
'../../assets/icons/close.png',
|
|
||||||
true
|
|
||||||
)
|
|
||||||
closeButton.width = this.headerStyle.fontSize
|
closeButton.width = this.headerStyle.fontSize
|
||||||
closeButton.height = closeButton.width
|
closeButton.height = closeButton.width
|
||||||
closeButton.tint = this.theme.color2
|
closeButton.tint = this.theme.color2
|
||||||
@ -1540,10 +1543,7 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.maxWidth) {
|
if (this.opts.maxWidth) {
|
||||||
const wordWrapWidth =
|
const wordWrapWidth =
|
||||||
this.opts.maxWidth -
|
this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
|
||||||
2 * this.opts.padding -
|
|
||||||
this.smallPadding -
|
|
||||||
this._closeButton.width
|
|
||||||
if (this._header) {
|
if (this._header) {
|
||||||
this.headerStyle.wordWrapWidth = wordWrapWidth
|
this.headerStyle.wordWrapWidth = wordWrapWidth
|
||||||
} else if (this._content) {
|
} else if (this._content) {
|
||||||
@ -1556,18 +1556,10 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.button || this.opts.buttonGroup) {
|
if (this.opts.button || this.opts.buttonGroup) {
|
||||||
if (this.opts.button) {
|
if (this.opts.button) {
|
||||||
this._buttons = new Button(
|
this._buttons = new Button(Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.button))
|
||||||
Object.assign(
|
|
||||||
{ textStyle: this.theme.textStyleSmall },
|
|
||||||
this.opts.button
|
|
||||||
)
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this._buttons = new ButtonGroup(
|
this._buttons = new ButtonGroup(
|
||||||
Object.assign(
|
Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
|
||||||
{ textStyle: this.theme.textStyleSmall },
|
|
||||||
this.opts.buttonGroup
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
this.addChild(this._buttons)
|
this.addChild(this._buttons)
|
||||||
@ -1589,18 +1581,15 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
// closeButton
|
// closeButton
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.closeButton) {
|
if (this.opts.closeButton) {
|
||||||
this._closeButton.x =
|
this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width
|
||||||
this.wantedWidth - this.smallPadding - this._closeButton.width
|
|
||||||
this._closeButton.y = this.smallPadding
|
this._closeButton.y = this.smallPadding
|
||||||
}
|
}
|
||||||
|
|
||||||
// buttons
|
// buttons
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this._buttons) {
|
if (this._buttons) {
|
||||||
this._buttons.x =
|
this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
|
||||||
this.wantedWidth - this.opts.padding - this._buttons.width
|
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
|
||||||
this._buttons.y =
|
|
||||||
this.wantedHeight - this.opts.padding - this._buttons.height
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return this
|
return this
|
||||||
@ -1623,10 +1612,7 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (this._buttons) {
|
if (this._buttons) {
|
||||||
size.width = Math.max(
|
size.width = Math.max(size.width, this._buttons.x + this._buttons.width)
|
||||||
size.width,
|
|
||||||
this._buttons.x + this._buttons.width
|
|
||||||
)
|
|
||||||
size.height += this.innerPadding + this._buttons.height
|
size.height += this.innerPadding + this._buttons.height
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1688,7 +1674,7 @@ export default class Popup extends InteractivePopup {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
let object = null
|
||||||
|
|
||||||
if (item.label) {
|
if (item.label) {
|
||||||
object = new PIXI.Text(
|
object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle)
|
||||||
item.label,
|
|
||||||
item.textStyle || this.opts.textStyle
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
object = item.content
|
object = item.content
|
||||||
}
|
}
|
||||||
@ -1574,7 +1577,7 @@ export default class PopupMenu extends Popup {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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) {
|
if (this.opts.background) {
|
||||||
this.background.clear()
|
this.background.clear()
|
||||||
this.background.beginFill(
|
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
|
||||||
this.opts.backgroundFill,
|
|
||||||
this.opts.backgroundFillAlpha
|
|
||||||
)
|
|
||||||
this.background.drawRect(0, 0, width, height)
|
this.background.drawRect(0, 0, width, height)
|
||||||
this.background.endFill()
|
this.background.endFill()
|
||||||
}
|
}
|
||||||
@ -1641,20 +1644,10 @@ export default class Progress extends PIXI.Container {
|
|||||||
const wantedWidth = this.opts.width || width - 2 * this.opts.margin
|
const wantedWidth = this.opts.width || width - 2 * this.opts.margin
|
||||||
const wantedHeight = this.opts.height
|
const wantedHeight = this.opts.height
|
||||||
|
|
||||||
this.bar.lineStyle(
|
this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.bar.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.bar.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
if (this.radius > 1) {
|
if (this.radius > 1) {
|
||||||
this.bar.drawRoundedRect(
|
this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
wantedWidth,
|
|
||||||
wantedHeight,
|
|
||||||
this.radius
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
|
this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
|
||||||
}
|
}
|
||||||
@ -1678,24 +1671,11 @@ export default class Progress extends PIXI.Container {
|
|||||||
|
|
||||||
const barActiveWidth = (wantedWidth * this._progress) / 100
|
const barActiveWidth = (wantedWidth * this._progress) / 100
|
||||||
|
|
||||||
this.barActive.lineStyle(
|
this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||||
this.opts.strokeActiveWidth,
|
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||||
this.opts.strokeActive,
|
|
||||||
this.opts.strokeActiveAlpha
|
|
||||||
)
|
|
||||||
this.barActive.beginFill(
|
|
||||||
this.opts.fillActive,
|
|
||||||
this.opts.fillActiveAlpha
|
|
||||||
)
|
|
||||||
if (barActiveWidth > 0) {
|
if (barActiveWidth > 0) {
|
||||||
if (this.radius > 1) {
|
if (this.radius > 1) {
|
||||||
this.barActive.drawRoundedRect(
|
this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
barActiveWidth,
|
|
||||||
wantedHeight,
|
|
||||||
this.radius
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
|
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
|
||||||
}
|
}
|
||||||
@ -1779,7 +1759,7 @@ export default class Progress extends PIXI.Container {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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 => {
|
this.on('pointermove', e => {
|
||||||
if (this.control.dragging) {
|
if (this.control.dragging) {
|
||||||
const moveX = this.control.event.data.getLocalPosition(
|
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
|
||||||
this.control.parent
|
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
|
||||||
).x
|
|
||||||
this._value = this.pixelToValue(
|
|
||||||
moveX - this.control.delta - this.opts.controlRadius
|
|
||||||
)
|
|
||||||
let x = this.valueToPixel(this._value) + this.opts.controlRadius
|
let x = this.valueToPixel(this._value) + this.opts.controlRadius
|
||||||
this.control.x = x
|
this.control.x = x
|
||||||
|
|
||||||
@ -1633,16 +1635,8 @@ export default class Slider extends PIXI.Container {
|
|||||||
|
|
||||||
if (container instanceof Element) {
|
if (container instanceof Element) {
|
||||||
container.addEventListener('pointerup', e => this.onEnd(e), false)
|
container.addEventListener('pointerup', e => this.onEnd(e), false)
|
||||||
container.addEventListener(
|
container.addEventListener('pointercancel', e => this.onEnd(e), false)
|
||||||
'pointercancel',
|
container.addEventListener('pointerleave', e => this.onEnd(e), false)
|
||||||
e => this.onEnd(e),
|
|
||||||
false
|
|
||||||
)
|
|
||||||
container.addEventListener(
|
|
||||||
'pointerleave',
|
|
||||||
e => this.onEnd(e),
|
|
||||||
false
|
|
||||||
)
|
|
||||||
container.addEventListener('pointerout', e => this.onEnd(e), false)
|
container.addEventListener('pointerout', e => this.onEnd(e), false)
|
||||||
container.addEventListener('mouseup', e => this.onEnd(e), false)
|
container.addEventListener('mouseup', e => this.onEnd(e), false)
|
||||||
container.addEventListener('mousecancel', e => this.onEnd(e), false)
|
container.addEventListener('mousecancel', e => this.onEnd(e), false)
|
||||||
@ -1703,9 +1697,7 @@ export default class Slider extends PIXI.Container {
|
|||||||
if (this.sliderObj.pointerdowned) {
|
if (this.sliderObj.pointerdowned) {
|
||||||
this.sliderObj.pointerdowned = false
|
this.sliderObj.pointerdowned = false
|
||||||
const position = e.data.getLocalPosition(this.control.parent)
|
const position = e.data.getLocalPosition(this.control.parent)
|
||||||
this.value = this.pixelToValue(
|
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
|
||||||
position.x - this.opts.controlRadius
|
|
||||||
)
|
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
|
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.clear()
|
||||||
this.sliderObj.beginFill(0xffffff, 0)
|
this.sliderObj.beginFill(0xffffff, 0)
|
||||||
this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2)
|
this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2)
|
||||||
this.sliderObj.lineStyle(
|
this.sliderObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
this.sliderObj.moveTo(x, y)
|
this.sliderObj.moveTo(x, y)
|
||||||
this.sliderObj.lineTo(x + w, y)
|
this.sliderObj.lineTo(x + w, y)
|
||||||
@ -1783,20 +1771,10 @@ export default class Slider extends PIXI.Container {
|
|||||||
|
|
||||||
// Draw control
|
// Draw control
|
||||||
this.control.clear()
|
this.control.clear()
|
||||||
this.control.lineStyle(
|
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||||
this.opts.controlStrokeWidth,
|
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
|
||||||
this.opts.controlStroke,
|
|
||||||
this.opts.controlStrokeAlpha
|
|
||||||
)
|
|
||||||
this.control.beginFill(
|
|
||||||
this.opts.controlFill,
|
|
||||||
this.opts.controlFillAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, cr - 1)
|
this.control.drawCircle(0, 0, cr - 1)
|
||||||
this.control.beginFill(
|
this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||||
this.opts.controlStroke,
|
|
||||||
this.opts.controlStrokeAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, cr / 6)
|
this.control.drawCircle(0, 0, cr / 6)
|
||||||
this.control.endFill()
|
this.control.endFill()
|
||||||
|
|
||||||
@ -1834,10 +1812,7 @@ export default class Slider extends PIXI.Container {
|
|||||||
} else if (value > this.opts.max) {
|
} else if (value > this.opts.max) {
|
||||||
value = this.opts.max
|
value = this.opts.max
|
||||||
}
|
}
|
||||||
return (
|
return (this.opts.width * (value - this.opts.min)) / (this.opts.max - this.opts.min)
|
||||||
(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) {
|
} else if (pixel > this.opts.width) {
|
||||||
pixel = this.opts.width
|
pixel = this.opts.width
|
||||||
}
|
}
|
||||||
return (
|
return this.opts.min + ((this.opts.max - this.opts.min) * pixel) / this.opts.width
|
||||||
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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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
|
opts
|
||||||
)
|
)
|
||||||
|
|
||||||
this.opts.controlRadius =
|
this.opts.controlRadius = this.opts.controlRadius || this.opts.height / 2
|
||||||
this.opts.controlRadius || this.opts.height / 2
|
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
|
||||||
this.opts.controlRadiusActive =
|
|
||||||
this.opts.controlRadiusActive || this.opts.controlRadius
|
|
||||||
|
|
||||||
// Validation
|
// Validation
|
||||||
//-----------------
|
//-----------------
|
||||||
@ -1757,32 +1761,15 @@ export default class Switch extends PIXI.Container {
|
|||||||
draw() {
|
draw() {
|
||||||
this.switchObj.clear()
|
this.switchObj.clear()
|
||||||
if (this.active) {
|
if (this.active) {
|
||||||
this.switchObj.lineStyle(
|
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||||
this.opts.strokeActiveWidth,
|
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||||
this.opts.strokeActive,
|
|
||||||
this.opts.strokeActiveAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.beginFill(
|
|
||||||
this.opts.fillActive,
|
|
||||||
this.opts.fillActiveAlpha
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.switchObj.lineStyle(
|
this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
}
|
}
|
||||||
this.switchObj.moveTo(this.radius, 0)
|
this.switchObj.moveTo(this.radius, 0)
|
||||||
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
|
||||||
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.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(
|
||||||
this.opts.width,
|
this.opts.width,
|
||||||
@ -1804,21 +1791,11 @@ export default class Switch extends PIXI.Container {
|
|||||||
this.opts.controlStrokeActive,
|
this.opts.controlStrokeActive,
|
||||||
this.opts.controlStrokeActiveAlpha
|
this.opts.controlStrokeActiveAlpha
|
||||||
)
|
)
|
||||||
this.control.beginFill(
|
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
|
||||||
this.opts.controlFillActive,
|
|
||||||
this.opts.controlFillActiveAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
|
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
|
||||||
} else {
|
} else {
|
||||||
this.control.lineStyle(
|
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||||
this.opts.controlStrokeWidth,
|
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
|
||||||
this.opts.controlStroke,
|
|
||||||
this.opts.controlStrokeAlpha
|
|
||||||
)
|
|
||||||
this.control.beginFill(
|
|
||||||
this.opts.controlFill,
|
|
||||||
this.opts.controlFillAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
|
this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
|
||||||
}
|
}
|
||||||
this.control.endFill()
|
this.control.endFill()
|
||||||
@ -1834,24 +1811,11 @@ export default class Switch extends PIXI.Container {
|
|||||||
*/
|
*/
|
||||||
drawAnimated() {
|
drawAnimated() {
|
||||||
this.switchObj.clear()
|
this.switchObj.clear()
|
||||||
this.switchObj.lineStyle(
|
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
|
||||||
this.tempAnimated.strokeWidth,
|
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
|
||||||
this.tempAnimated.stroke,
|
|
||||||
this.tempAnimated.strokeAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.beginFill(
|
|
||||||
this.tempAnimated.fill,
|
|
||||||
this.tempAnimated.fillAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.moveTo(this.radius, 0)
|
this.switchObj.moveTo(this.radius, 0)
|
||||||
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
|
||||||
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.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(
|
||||||
this.opts.width,
|
this.opts.width,
|
||||||
@ -1871,10 +1835,7 @@ export default class Switch extends PIXI.Container {
|
|||||||
this.tempAnimated.controlStroke,
|
this.tempAnimated.controlStroke,
|
||||||
this.tempAnimated.controlStrokeAlpha
|
this.tempAnimated.controlStrokeAlpha
|
||||||
)
|
)
|
||||||
this.control.beginFill(
|
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
|
||||||
this.tempAnimated.controlFill,
|
|
||||||
this.tempAnimated.controlFillAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
|
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
|
||||||
this.control.endFill()
|
this.control.endFill()
|
||||||
|
|
||||||
@ -2016,7 +1977,7 @@ export default class Switch extends PIXI.Container {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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.
|
* is used for large actived text.
|
||||||
*/
|
*/
|
||||||
constructor(opts = {}) {
|
constructor(opts = {}) {
|
||||||
const colorPrimary =
|
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
|
||||||
opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
|
|
||||||
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
|
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
|
||||||
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
|
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
|
||||||
|
|
||||||
@ -1713,7 +1718,7 @@ export class ThemeRed extends Theme {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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#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>
|
||||||
<ul class="typedefs itemMembers">
|
<ul class="typedefs itemMembers">
|
||||||
|
|
||||||
@ -263,6 +267,8 @@
|
|||||||
|
|
||||||
<span class="subtitle">Methods</span>
|
<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#hide"><a href="ButtonGroup.html#hide">hide</a></li>
|
||||||
|
|
||||||
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</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) {
|
if (opts.eventType) {
|
||||||
opts.eventTypes = opts.eventType
|
opts.eventTypes = opts.eventType
|
||||||
}
|
}
|
||||||
opts.eventTypes = Array.isArray(opts.eventTypes)
|
opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes]
|
||||||
? opts.eventTypes
|
|
||||||
: [opts.eventTypes]
|
|
||||||
|
|
||||||
// timeline
|
// timeline
|
||||||
//--------------------
|
//--------------------
|
||||||
@ -1674,14 +1678,8 @@ export default class UITest {
|
|||||||
if (opts.eventTypes[0]) {
|
if (opts.eventTypes[0]) {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const eventStart = Event.create(
|
const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', eventStart)
|
||||||
coords,
|
|
||||||
opts.eventTypes[0],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', eventStart)
|
|
||||||
elem.dispatchEvent(eventStart)
|
elem.dispatchEvent(eventStart)
|
||||||
|
|
||||||
// onStart
|
// onStart
|
||||||
@ -1693,14 +1691,8 @@ export default class UITest {
|
|||||||
|
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const eventComplete = Event.create(
|
const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', eventComplete)
|
||||||
coords,
|
|
||||||
opts.eventTypes[1],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', eventComplete)
|
|
||||||
elem.dispatchEvent(eventComplete)
|
elem.dispatchEvent(eventComplete)
|
||||||
|
|
||||||
// onComplete
|
// onComplete
|
||||||
@ -1795,14 +1787,8 @@ export default class UITest {
|
|||||||
onStart: () => {
|
onStart: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[0],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onStart
|
// onStart
|
||||||
@ -1814,14 +1800,8 @@ export default class UITest {
|
|||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[1],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onUpdate
|
// onUpdate
|
||||||
@ -1833,14 +1813,8 @@ export default class UITest {
|
|||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[2],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onComplete
|
// onComplete
|
||||||
@ -1991,66 +1965,39 @@ export default class UITest {
|
|||||||
onStart: () => {
|
onStart: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[0],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onStart
|
// onStart
|
||||||
//--------------------
|
//--------------------
|
||||||
if (
|
if (opts.onStart && (opts.doubleCallbacks || key === 0)) {
|
||||||
opts.onStart &&
|
|
||||||
(opts.doubleCallbacks || key === 0)
|
|
||||||
) {
|
|
||||||
opts.onStart.call(this, event)
|
opts.onStart.call(this, event)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[1],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onUpdate
|
// onUpdate
|
||||||
//--------------------
|
//--------------------
|
||||||
if (
|
if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) {
|
||||||
opts.onUpdate &&
|
|
||||||
(opts.doubleCallbacks || key === 0)
|
|
||||||
) {
|
|
||||||
opts.onUpdate.call(this, event)
|
opts.onUpdate.call(this, event)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[2],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onComplete
|
// onComplete
|
||||||
//--------------------
|
//--------------------
|
||||||
if (
|
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
|
||||||
opts.onComplete &&
|
|
||||||
(opts.doubleCallbacks || key === 0)
|
|
||||||
) {
|
|
||||||
opts.onComplete.call(this, event)
|
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!'
|
'No execution time was specified for this action, and a default interval was not set in the class constructor!'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
timelinePosition =
|
timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1)
|
||||||
Math.max(...this._timelinePositions) +
|
|
||||||
(this.opts.defaultInterval || 1)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (opts === null) {
|
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.
|
* @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) {
|
static extractElement(context, element) {
|
||||||
const cont = Util.isFrame(context)
|
const cont = Util.isFrame(context) ? context.contentDocument : context.document
|
||||||
? context.contentDocument
|
const elem = Util.isString(element) ? cont.querySelector(element) : element
|
||||||
: context.document
|
|
||||||
const elem = Util.isString(element)
|
|
||||||
? cont.querySelector(element)
|
|
||||||
: element
|
|
||||||
|
|
||||||
return elem
|
return elem
|
||||||
}
|
}
|
||||||
@ -2306,9 +2247,7 @@ class Util {
|
|||||||
type: 'thru'
|
type: 'thru'
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
opts.bezier.values = opts.bezier.values.map(it =>
|
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it))
|
||||||
Util.extractPosition(it)
|
|
||||||
)
|
|
||||||
bezier = opts.bezier
|
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 {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.
|
* @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(
|
static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) {
|
||||||
target,
|
|
||||||
position = { x: 0, y: 0 },
|
|
||||||
type = 'pointerup',
|
|
||||||
opts = {}
|
|
||||||
) {
|
|
||||||
const rect =
|
const rect =
|
||||||
typeof target.getBoundingClientRect === 'function'
|
typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 }
|
||||||
? target.getBoundingClientRect()
|
|
||||||
: { x: 0, y: 0 }
|
|
||||||
|
|
||||||
// EventInit
|
// EventInit
|
||||||
const eventOpts = {
|
const eventOpts = {
|
||||||
@ -2512,25 +2444,12 @@ class Event {
|
|||||||
if (type.startsWith('pointer')) {
|
if (type.startsWith('pointer')) {
|
||||||
return new PointerEvent(
|
return new PointerEvent(
|
||||||
type,
|
type,
|
||||||
Object.assign(
|
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts)
|
||||||
{},
|
|
||||||
eventOpts,
|
|
||||||
uiEventOpts,
|
|
||||||
mouseEventOpts,
|
|
||||||
pointerEventOpts,
|
|
||||||
opts
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
} else if (type.startsWith('touch')) {
|
} else if (type.startsWith('touch')) {
|
||||||
return new TouchEvent(
|
return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts))
|
||||||
type,
|
|
||||||
Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
return new MouseEvent(
|
return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts))
|
||||||
type,
|
|
||||||
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -2547,7 +2466,7 @@ class Event {
|
|||||||
|
|
||||||
<footer class="content-size">
|
<footer class="content-size">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
20
gulpfile.js
20
gulpfile.js
@ -38,13 +38,9 @@ function vendors() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
return src(
|
return src(['./node_modules/gsap/src/uncompressed/TweenMax.js', './lib/3rdparty/convertPointFromPageToNode.js'], {
|
||||||
[
|
sourcemaps: false
|
||||||
'./node_modules/gsap/src/uncompressed/TweenMax.js',
|
})
|
||||||
'./lib/3rdparty/convertPointFromPageToNode.js'
|
|
||||||
],
|
|
||||||
{ sourcemaps: false }
|
|
||||||
)
|
|
||||||
.pipe(concat('iwmlib.3rdparty.preload.js'))
|
.pipe(concat('iwmlib.3rdparty.preload.js'))
|
||||||
.pipe(replace(/^\/\/# sourceMappingURL=.*$/gim, ''))
|
.pipe(replace(/^\/\/# sourceMappingURL=.*$/gim, ''))
|
||||||
.pipe(dest('dist', { sourcemaps: false }))
|
.pipe(dest('dist', { sourcemaps: false }))
|
||||||
@ -55,12 +51,7 @@ function preload() {
|
|||||||
|
|
||||||
function prettify() {
|
function prettify() {
|
||||||
return src(
|
return src(
|
||||||
[
|
['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', './lib/pixi/deepzoom/*.js', '!./lib/bootstrap.babel.js'],
|
||||||
'./lib/*.js',
|
|
||||||
'./lib/card/*.js',
|
|
||||||
'./lib/pixi/*.js',
|
|
||||||
'!./lib/bootstrap.babel.js'
|
|
||||||
],
|
|
||||||
{
|
{
|
||||||
base: './lib'
|
base: './lib'
|
||||||
}
|
}
|
||||||
@ -70,7 +61,8 @@ function prettify() {
|
|||||||
singleQuote: true,
|
singleQuote: true,
|
||||||
jsxSingleQuote: true,
|
jsxSingleQuote: true,
|
||||||
tabWidth: 4,
|
tabWidth: 4,
|
||||||
semi: false
|
semi: false,
|
||||||
|
printWidth: 120
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.pipe(dest('./lib'))
|
.pipe(dest('./lib'))
|
||||||
|
|||||||
14
lib/bootstrap.js
vendored
14
lib/bootstrap.js
vendored
@ -1,9 +1,6 @@
|
|||||||
class Bootstrap extends Object {
|
class Bootstrap extends Object {
|
||||||
static get isSafari() {
|
static get isSafari() {
|
||||||
return (
|
return /Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor)
|
||||||
/Safari/.test(navigator.userAgent) &&
|
|
||||||
/Apple Computer, Inc/.test(navigator.vendor)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static get isModernSafari() {
|
static get isModernSafari() {
|
||||||
@ -78,11 +75,7 @@ class Bootstrap extends Object {
|
|||||||
},
|
},
|
||||||
null
|
null
|
||||||
)
|
)
|
||||||
} else if (
|
} else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) {
|
||||||
this.isModernSafari ||
|
|
||||||
this.isModernChrome ||
|
|
||||||
this.isModernFirefox
|
|
||||||
) {
|
|
||||||
this.load(src, callback)
|
this.load(src, callback)
|
||||||
} else {
|
} else {
|
||||||
this.load(
|
this.load(
|
||||||
@ -129,8 +122,7 @@ class Bootstrap extends Object {
|
|||||||
baseURL: baseUrl,
|
baseURL: baseUrl,
|
||||||
map: {
|
map: {
|
||||||
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
|
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
|
||||||
'systemjs-babel-build':
|
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
|
||||||
baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
|
|
||||||
},
|
},
|
||||||
transpiler: 'plugin-babel',
|
transpiler: 'plugin-babel',
|
||||||
meta: {
|
meta: {
|
||||||
|
|||||||
@ -2,15 +2,7 @@ import App from './app.js'
|
|||||||
import Doctest from './doctest.js'
|
import Doctest from './doctest.js'
|
||||||
import Errors from './errors.js'
|
import Errors from './errors.js'
|
||||||
import Events from './events.js'
|
import Events from './events.js'
|
||||||
import {
|
import { DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader } from './flippable.js'
|
||||||
DOMFlip,
|
|
||||||
DOMFlippable,
|
|
||||||
CardLoader,
|
|
||||||
PDFLoader,
|
|
||||||
ImageLoader,
|
|
||||||
FrameLoader,
|
|
||||||
HTMLLoader
|
|
||||||
} from './flippable.js'
|
|
||||||
import Index from './index.js'
|
import Index from './index.js'
|
||||||
import Interface from './interface.js'
|
import Interface from './interface.js'
|
||||||
import Logging from './logging.js'
|
import Logging from './logging.js'
|
||||||
|
|||||||
@ -45,20 +45,12 @@ export class Capabilities {
|
|||||||
*/
|
*/
|
||||||
static get isElectron() {
|
static get isElectron() {
|
||||||
// Renderer process
|
// Renderer process
|
||||||
if (
|
if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
|
||||||
typeof window !== 'undefined' &&
|
|
||||||
typeof window.process === 'object' &&
|
|
||||||
window.process.type === 'renderer'
|
|
||||||
) {
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
// Main process
|
// Main process
|
||||||
if (
|
if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
|
||||||
typeof process !== 'undefined' &&
|
|
||||||
typeof process.versions === 'object' &&
|
|
||||||
!!process.versions.electron
|
|
||||||
) {
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -126,9 +118,7 @@ export class Capabilities {
|
|||||||
export class CapabilitiesTests {
|
export class CapabilitiesTests {
|
||||||
static testConfirm() {
|
static testConfirm() {
|
||||||
let bool = confirm('Please confirm')
|
let bool = confirm('Please confirm')
|
||||||
document.getElementById('demo').innerHTML = bool
|
document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed'
|
||||||
? 'Confirmed'
|
|
||||||
: 'Not confirmed'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static testPrompt() {
|
static testPrompt() {
|
||||||
@ -149,9 +139,7 @@ export class CapabilitiesTests {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static testMultiTouchTable() {
|
static testMultiTouchTable() {
|
||||||
let value =
|
let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable
|
||||||
'Is the device a multi-touch table? ' +
|
|
||||||
Capabilities.isMultiTouchTable
|
|
||||||
multi_touch_table.innerHTML = value
|
multi_touch_table.innerHTML = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
215
lib/card/card.js
215
lib/card/card.js
@ -32,8 +32,7 @@ export default class Card {
|
|||||||
console.log('Setup Card...', modules)
|
console.log('Setup Card...', modules)
|
||||||
context.modules = []
|
context.modules = []
|
||||||
modules.forEach(module => {
|
modules.forEach(module => {
|
||||||
if (module.apply(context))
|
if (module.apply(context)) context.modules.push(module.constructor.name)
|
||||||
context.modules.push(module.constructor.name)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -138,10 +137,7 @@ export default class Card {
|
|||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
if (callStack) callStack.call(that, ...args)
|
if (callStack) callStack.call(that, ...args)
|
||||||
else {
|
else {
|
||||||
console.error(
|
console.error('Could not call callback function ' + attributeVal, ...args)
|
||||||
'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,
|
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
|
||||||
function(data) {
|
function(data) {
|
||||||
let path = that._getRelativePath(arguments[4])
|
let path = that._getRelativePath(arguments[4])
|
||||||
const tag = `<${arguments[1]} ${arguments[2]} ${
|
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
|
||||||
arguments[3]
|
|
||||||
}="${path}" ${arguments[5]}>`
|
|
||||||
/* if (that.debug) */ console.log('Adjusted: ', tag)
|
/* if (that.debug) */ console.log('Adjusted: ', tag)
|
||||||
return tag
|
return tag
|
||||||
}
|
}
|
||||||
@ -328,16 +322,13 @@ export default class Card {
|
|||||||
//Test if meanwhile another popup was registered...
|
//Test if meanwhile another popup was registered...
|
||||||
this._getPopup(context) ||
|
this._getPopup(context) ||
|
||||||
// Or if an highlight was loaded, if the highlight already was closed.
|
// Or if an highlight was loaded, if the highlight already was closed.
|
||||||
(highlight !== null &&
|
(highlight !== null && !this._isHighlightActive(context, highlight))
|
||||||
!this._isHighlightActive(context, highlight))
|
|
||||||
) {
|
) {
|
||||||
//.. if so remove the create popup instantly.
|
//.. if so remove the create popup instantly.
|
||||||
popup.remove()
|
popup.remove()
|
||||||
} else {
|
} else {
|
||||||
// Otherwise set the popup regularly.
|
// Otherwise set the popup regularly.
|
||||||
let popupParagraphs = popup.element.querySelectorAll(
|
let popupParagraphs = popup.element.querySelectorAll('.popupContent > *')
|
||||||
'.popupContent > *'
|
|
||||||
)
|
|
||||||
|
|
||||||
// Remove a design error of naming two adjacent elements popup.
|
// Remove a design error of naming two adjacent elements popup.
|
||||||
// Todo: fix this properly and remove this code.
|
// Todo: fix this properly and remove this code.
|
||||||
@ -388,8 +379,7 @@ export default class Card {
|
|||||||
* @memberof Card
|
* @memberof Card
|
||||||
*/
|
*/
|
||||||
static _createPopup(context, position, content, options = {}) {
|
static _createPopup(context, position, content, options = {}) {
|
||||||
if (this.debug)
|
if (this.debug) console.log('Create Popup.', context, position, content, options)
|
||||||
console.log('Create Popup.', context, position, content, options)
|
|
||||||
let popup = new Popup(
|
let popup = new Popup(
|
||||||
Object.assign(
|
Object.assign(
|
||||||
{
|
{
|
||||||
@ -482,9 +472,7 @@ export default class Card {
|
|||||||
node = event.target
|
node = event.target
|
||||||
}
|
}
|
||||||
if (local == null) {
|
if (local == null) {
|
||||||
let globalClick = event.center
|
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
|
||||||
? event.center
|
|
||||||
: { x: event.x, y: event.y }
|
|
||||||
local = Points.fromPageToNode(context, globalClick)
|
local = Points.fromPageToNode(context, globalClick)
|
||||||
}
|
}
|
||||||
if (this.debug) console.log('loadPopup', event)
|
if (this.debug) console.log('loadPopup', event)
|
||||||
@ -517,17 +505,11 @@ export default class Card {
|
|||||||
|
|
||||||
// Extract the body from the Popup site.
|
// Extract the body from the Popup site.
|
||||||
let parser = new DOMParser()
|
let parser = new DOMParser()
|
||||||
let popupPage = parser.parseFromString(
|
let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
|
||||||
xhr.responseText,
|
|
||||||
'text/html'
|
|
||||||
)
|
|
||||||
|
|
||||||
//Fix the relative path of loaded images in the popup.
|
//Fix the relative path of loaded images in the popup.
|
||||||
popupPage.querySelectorAll('img').forEach(node => {
|
popupPage.querySelectorAll('img').forEach(node => {
|
||||||
node.setAttribute(
|
node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
|
||||||
'src',
|
|
||||||
that._getRelativePath(node.getAttribute('src'))
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
let html = popupPage.body.innerHTML
|
let html = popupPage.body.innerHTML
|
||||||
/**
|
/**
|
||||||
@ -549,18 +531,10 @@ export default class Card {
|
|||||||
Card._cleanup(context)
|
Card._cleanup(context)
|
||||||
|
|
||||||
if (!isSame) {
|
if (!isSame) {
|
||||||
Card._activateCorrespondingHighlights(
|
Card._activateCorrespondingHighlights(context, node, parentArticle)
|
||||||
context,
|
|
||||||
node,
|
|
||||||
parentArticle
|
|
||||||
)
|
|
||||||
|
|
||||||
let callback = (popup, callback) => {
|
let callback = (popup, callback) => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup)
|
||||||
console.log(
|
|
||||||
'Close popup (Editable = ' + editable + ').',
|
|
||||||
popup
|
|
||||||
)
|
|
||||||
if (editable) {
|
if (editable) {
|
||||||
let isDirty = mainController.askSaveNode()
|
let isDirty = mainController.askSaveNode()
|
||||||
if (isDirty)
|
if (isDirty)
|
||||||
@ -596,8 +570,7 @@ export default class Card {
|
|||||||
}
|
}
|
||||||
//console.log("onreadystatechange", editable)
|
//console.log("onreadystatechange", editable)
|
||||||
if (editable) {
|
if (editable) {
|
||||||
if (this.debug)
|
if (this.debug) console.log('pushController', src, popup.insertedNode)
|
||||||
console.log('pushController', src, popup.insertedNode)
|
|
||||||
mainController.pushController(popup.insertedNode, src)
|
mainController.pushController(popup.insertedNode, src)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -627,10 +600,7 @@ export default class Card {
|
|||||||
}
|
}
|
||||||
if (correspondingHighlights.length > 0) {
|
if (correspondingHighlights.length > 0) {
|
||||||
for (let highlight of correspondingHighlights) {
|
for (let highlight of correspondingHighlights) {
|
||||||
if (
|
if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
|
||||||
highlight.parentNode &&
|
|
||||||
highlight.parentNode.nodeName.toLowerCase() == 'g'
|
|
||||||
) {
|
|
||||||
Highlight.openHighlight(highlight, {
|
Highlight.openHighlight(highlight, {
|
||||||
animation: Card.highlightAnimation
|
animation: Card.highlightAnimation
|
||||||
})
|
})
|
||||||
@ -675,6 +645,22 @@ export default class Card {
|
|||||||
return requestedSame
|
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.
|
* 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
|
* @returns {bool} false - Returns false to prevent default click action
|
||||||
* @memberof Card
|
* @memberof Card
|
||||||
*/
|
*/
|
||||||
static loadHighlightPopup(event) {
|
static loadHighlightPopup(event, node = null) {
|
||||||
if (this.debug) console.log('Load Highlight Popup: ', event)
|
if (this.debug) console.log('Card.loadHighlightPopup', event, node)
|
||||||
let node
|
if (node == null) {
|
||||||
if (event.firstTarget) {
|
if (event.firstTarget) {
|
||||||
node = event.firstTarget
|
node = event.firstTarget
|
||||||
} else {
|
} else {
|
||||||
node = event.target
|
node = event.target
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let context = this.getContext(node)
|
let context = this.getContext(node)
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
|
||||||
@ -709,11 +697,10 @@ export default class Card {
|
|||||||
animation: Card.highlightAnimation,
|
animation: Card.highlightAnimation,
|
||||||
onExpanded: () => {
|
onExpanded: () => {
|
||||||
// We assume it's always a circle. This may break, when other svg shapes are used.
|
// 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
|
As the popup is appended directly to the card. We have to
|
||||||
@ -721,18 +708,17 @@ export default class Card {
|
|||||||
card space.
|
card space.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
let svgRoot = node.closest('svg')
|
// let svgRoot = node.closest('svg')
|
||||||
|
|
||||||
let svgPoint = svgRoot.createSVGPoint()
|
let svgPoint = svgRoot.createSVGPoint()
|
||||||
svgPoint.x = position.x
|
svgPoint.x = position.x
|
||||||
svgPoint.y = position.y - radius
|
svgPoint.y = position.y
|
||||||
let matrix = node.getCTM()
|
let matrix = node.getCTM()
|
||||||
|
|
||||||
let point = svgPoint.matrixTransform(matrix)
|
let point = svgPoint.matrixTransform(matrix)
|
||||||
let global = Points.fromNodeToPage(
|
let closestDiv = node.closest('div')
|
||||||
node.closest('div'),
|
console.log('closestDiv', closestDiv, point)
|
||||||
point
|
let global = Points.fromNodeToPage(closestDiv, point)
|
||||||
)
|
|
||||||
let local = Points.fromPageToNode(context, global)
|
let local = Points.fromPageToNode(context, global)
|
||||||
|
|
||||||
let overlay = document.createElement('div')
|
let overlay = document.createElement('div')
|
||||||
@ -743,7 +729,7 @@ export default class Card {
|
|||||||
// we could load the data while the circle is animating.
|
// we could load the data while the circle is animating.
|
||||||
// but for simplicity it's just done here for now.
|
// but for simplicity it's just done here for now.
|
||||||
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
|
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
|
||||||
console.log(src)
|
console.log('loadHighlightPopup', src, position, local)
|
||||||
this._loadPopupContent(src)
|
this._loadPopupContent(src)
|
||||||
.then(content => {
|
.then(content => {
|
||||||
this._openPopup(context, src, local, content, {
|
this._openPopup(context, src, local, content, {
|
||||||
@ -778,16 +764,12 @@ export default class Card {
|
|||||||
xhr.onreadystatechange = () => {
|
xhr.onreadystatechange = () => {
|
||||||
if (xhr.readyState == 4) {
|
if (xhr.readyState == 4) {
|
||||||
if (xhr.status == 200 || xhr.status == 0) {
|
if (xhr.status == 200 || xhr.status == 0) {
|
||||||
let html = this.postProcessResponseText(
|
let html = this.postProcessResponseText(xhr.responseText)
|
||||||
xhr.responseText
|
|
||||||
)
|
|
||||||
let selector = Card.popupHtmlSelector
|
let selector = Card.popupHtmlSelector
|
||||||
let content = { html: html.body.innerHTML, selector }
|
let content = { html: html.body.innerHTML, selector }
|
||||||
resolve(content)
|
resolve(content)
|
||||||
} else {
|
} else {
|
||||||
reject(
|
reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`)
|
||||||
` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -802,8 +784,7 @@ export default class Card {
|
|||||||
|
|
||||||
let editable = Card.isEditable()
|
let editable = Card.isEditable()
|
||||||
if (editable) {
|
if (editable) {
|
||||||
if (node.classList.contains('zoomable-icon'))
|
if (node.classList.contains('zoomable-icon')) this._openZoomable(event)
|
||||||
this._openZoomable(event)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this._openZoomable(event)
|
this._openZoomable(event)
|
||||||
@ -852,10 +833,7 @@ export default class Card {
|
|||||||
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
|
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
|
||||||
let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 })
|
let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 })
|
||||||
let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos)
|
let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos)
|
||||||
let relativeBottomRight = Points.fromPageToNode(
|
let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight)
|
||||||
zoomable,
|
|
||||||
globalBottomRight
|
|
||||||
)
|
|
||||||
|
|
||||||
let width =
|
let width =
|
||||||
relativeBottomRight.x +
|
relativeBottomRight.x +
|
||||||
@ -969,12 +947,8 @@ export default class Card {
|
|||||||
})
|
})
|
||||||
|
|
||||||
let zoomedFigStyle = window.getComputedStyle(zoomedFig)
|
let zoomedFigStyle = window.getComputedStyle(zoomedFig)
|
||||||
let borderX =
|
let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth)
|
||||||
parseFloat(zoomedFigStyle.borderLeftWidth) +
|
let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth)
|
||||||
parseFloat(zoomedFigStyle.borderRightWidth)
|
|
||||||
let borderY =
|
|
||||||
parseFloat(zoomedFigStyle.borderBottomWidth) +
|
|
||||||
parseFloat(zoomedFigStyle.borderTopWidth)
|
|
||||||
|
|
||||||
const scaleFactor = 2
|
const scaleFactor = 2
|
||||||
const transformOrigin = 'bottom right'
|
const transformOrigin = 'bottom right'
|
||||||
@ -1026,14 +1000,7 @@ export default class Card {
|
|||||||
.to(zoomCaption, this.animation.fade, {
|
.to(zoomCaption, this.animation.fade, {
|
||||||
autoAlpha: 1
|
autoAlpha: 1
|
||||||
})
|
})
|
||||||
} else
|
} else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
|
||||||
this._openZoomableEditorBehaviour(
|
|
||||||
wrapper,
|
|
||||||
img,
|
|
||||||
zoomable,
|
|
||||||
zoomedFig,
|
|
||||||
current
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -1066,13 +1033,7 @@ export default class Card {
|
|||||||
return parent.querySelector('.icon')
|
return parent.querySelector('.icon')
|
||||||
}
|
}
|
||||||
|
|
||||||
static _openZoomableEditorBehaviour(
|
static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) {
|
||||||
wrapper,
|
|
||||||
img,
|
|
||||||
zoomable,
|
|
||||||
zoomedFig,
|
|
||||||
current
|
|
||||||
) {
|
|
||||||
let zoomContainer = document.createElement('div')
|
let zoomContainer = document.createElement('div')
|
||||||
let zoomIcon = zoomable.querySelector('.zoom-icon')
|
let zoomIcon = zoomable.querySelector('.zoom-icon')
|
||||||
zoomContainer.style.position = 'relative'
|
zoomContainer.style.position = 'relative'
|
||||||
@ -1166,8 +1127,7 @@ export default class Card {
|
|||||||
* @memberof Card
|
* @memberof Card
|
||||||
*/
|
*/
|
||||||
static closeZoomable(context, zoomable, zoomedFig) {
|
static closeZoomable(context, zoomable, zoomedFig) {
|
||||||
if (this.debug)
|
if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig)
|
||||||
console.log('Close Zoomable', context, zoomable, zoomedFig)
|
|
||||||
|
|
||||||
if (zoomable) {
|
if (zoomable) {
|
||||||
this._unsetZoomable(context)
|
this._unsetZoomable(context)
|
||||||
@ -1218,13 +1178,7 @@ export default class Card {
|
|||||||
* @param {*} src - The src of the expanded element
|
* @param {*} src - The src of the expanded element
|
||||||
* @param {*} callback - A callback that is called when the expanded element is closed
|
* @param {*} callback - A callback that is called when the expanded element is closed
|
||||||
*/
|
*/
|
||||||
static expandIndexCard(
|
static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) {
|
||||||
card,
|
|
||||||
html,
|
|
||||||
tagName = 'article',
|
|
||||||
src = null,
|
|
||||||
callback = null
|
|
||||||
) {
|
|
||||||
let editable = Card.isEditable()
|
let editable = Card.isEditable()
|
||||||
|
|
||||||
let context = this.getContext(card)
|
let context = this.getContext(card)
|
||||||
@ -1257,10 +1211,7 @@ export default class Card {
|
|||||||
|
|
||||||
let globalPreviewRect = Card._getGlobalRect(card)
|
let globalPreviewRect = Card._getGlobalRect(card)
|
||||||
let globalIndexCardRect = Card._getGlobalRect(indexbox)
|
let globalIndexCardRect = Card._getGlobalRect(indexbox)
|
||||||
let localOrigin = Points.fromPageToNode(
|
let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect))
|
||||||
indexbox,
|
|
||||||
Rect.getPosition(globalPreviewRect)
|
|
||||||
)
|
|
||||||
|
|
||||||
let scaleX = globalPreviewRect.width / globalIndexCardRect.width
|
let scaleX = globalPreviewRect.width / globalIndexCardRect.width
|
||||||
let scaleY = globalPreviewRect.height / globalIndexCardRect.height
|
let scaleY = globalPreviewRect.height / globalIndexCardRect.height
|
||||||
@ -1331,15 +1282,12 @@ export default class Card {
|
|||||||
let cardName = strparts[strparts.length - 1]
|
let cardName = strparts[strparts.length - 1]
|
||||||
strparts = card.className.split(' ')
|
strparts = card.className.split(' ')
|
||||||
let cardType = strparts[1]
|
let cardType = strparts[1]
|
||||||
let msg =
|
let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
|
||||||
'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
|
|
||||||
console.log('Logging:', msg)
|
console.log('Logging:', msg)
|
||||||
Logging.log(msg)
|
Logging.log(msg)
|
||||||
}
|
}
|
||||||
|
|
||||||
let desiredBorderBottomWidth = parseInt(
|
let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth)
|
||||||
window.getComputedStyle(titlebar).borderBottomWidth
|
|
||||||
)
|
|
||||||
TweenLite.to(clone, Card.animation.articleTransition, {
|
TweenLite.to(clone, Card.animation.articleTransition, {
|
||||||
x: -padding,
|
x: -padding,
|
||||||
y: -padding,
|
y: -padding,
|
||||||
@ -1360,8 +1308,7 @@ export default class Card {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Retain the border at same visual thickness.
|
// Retain the border at same visual thickness.
|
||||||
titlebar.style.borderBottomWidth =
|
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
|
||||||
desiredBorderBottomWidth / transform.scaleY + 'px'
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -1384,13 +1331,7 @@ export default class Card {
|
|||||||
let cardName = strparts[strparts.length - 1]
|
let cardName = strparts[strparts.length - 1]
|
||||||
strparts = card.className.split(' ')
|
strparts = card.className.split(' ')
|
||||||
let cardType = strparts[1]
|
let cardType = strparts[1]
|
||||||
let msg =
|
let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName
|
||||||
'Card: ' +
|
|
||||||
cardID +
|
|
||||||
': closeTopic: ' +
|
|
||||||
cardType +
|
|
||||||
', ' +
|
|
||||||
cardName
|
|
||||||
console.log('Logging:', msg)
|
console.log('Logging:', msg)
|
||||||
Logging.log(msg)
|
Logging.log(msg)
|
||||||
}
|
}
|
||||||
@ -1457,8 +1398,7 @@ export default class Card {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Retain the border at same visual thickness.
|
// Retain the border at same visual thickness.
|
||||||
titlebar.style.borderBottomWidth =
|
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
|
||||||
desiredBorderBottomWidth / transform.scaleY + 'px'
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -1468,9 +1408,7 @@ export default class Card {
|
|||||||
|
|
||||||
if (iconClone == null) {
|
if (iconClone == null) {
|
||||||
iconClone = clone.querySelector('.cardicon')
|
iconClone = clone.querySelector('.cardicon')
|
||||||
console.warn(
|
console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name.")
|
||||||
"Legacy selector. Change it to 'card-icon' and find a more suitable name."
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (iconClone.tagName == 'img') {
|
if (iconClone.tagName == 'img') {
|
||||||
@ -1478,11 +1416,7 @@ export default class Card {
|
|||||||
}
|
}
|
||||||
//console.log("ICON: ", iconClone)
|
//console.log("ICON: ", iconClone)
|
||||||
iconClone.classList.remove('info')
|
iconClone.classList.remove('info')
|
||||||
iconClone.classList.add(
|
iconClone.classList.add('close', 'view-button', 'transparent-background')
|
||||||
'close',
|
|
||||||
'view-button',
|
|
||||||
'transparent-background'
|
|
||||||
)
|
|
||||||
|
|
||||||
// We append the icon clone to the subcard-content.
|
// We append the icon clone to the subcard-content.
|
||||||
// Then it's always on the content and not on the background
|
// Then it's always on the content and not on the background
|
||||||
@ -1589,13 +1523,7 @@ export default class Card {
|
|||||||
// card.insertAdjacentElement('afterbegin', article)
|
// card.insertAdjacentElement('afterbegin', article)
|
||||||
// TweenLite.set(article, { autoAlpha: 0 })
|
// TweenLite.set(article, { autoAlpha: 0 })
|
||||||
|
|
||||||
Card.expandIndexCard(
|
Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback)
|
||||||
card,
|
|
||||||
parsedHTML,
|
|
||||||
'article',
|
|
||||||
relativeSource,
|
|
||||||
saveCallback
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
xhr.onerror = () => {
|
xhr.onerror = () => {
|
||||||
@ -1632,9 +1560,7 @@ export default class Card {
|
|||||||
let dom = child.closest('.info-card')
|
let dom = child.closest('.info-card')
|
||||||
if (!dom) {
|
if (!dom) {
|
||||||
dom = child.querySelector('.wrapper')
|
dom = child.querySelector('.wrapper')
|
||||||
console.warn(
|
console.warn("Change the 'wrapper' class to 'info-card' it's more suitable.")
|
||||||
"Change the 'wrapper' class to 'info-card' it's more suitable."
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
return dom // (dom == null) ? document.body : dom
|
return dom // (dom == null) ? document.body : dom
|
||||||
}
|
}
|
||||||
@ -1782,9 +1708,7 @@ export default class Card {
|
|||||||
if (indexbox != null) {
|
if (indexbox != null) {
|
||||||
// column != null ||
|
// column != null ||
|
||||||
let links = Array.from(indexbox.getElementsByTagName('a'))
|
let links = Array.from(indexbox.getElementsByTagName('a'))
|
||||||
let globalClick = event.center
|
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
|
||||||
? event.center
|
|
||||||
: { x: event.x, y: event.y }
|
|
||||||
let localClick = Points.fromPageToNode(indexbox, globalClick)
|
let localClick = Points.fromPageToNode(indexbox, globalClick)
|
||||||
|
|
||||||
let linkRects = links.map(link => {
|
let linkRects = links.map(link => {
|
||||||
@ -1819,16 +1743,9 @@ export default class Card {
|
|||||||
let closestLinkIndex = distances.indexOf(Math.min(...distances))
|
let closestLinkIndex = distances.indexOf(Math.min(...distances))
|
||||||
let closestLink = links[closestLinkIndex]
|
let closestLink = links[closestLinkIndex]
|
||||||
|
|
||||||
console.log(
|
console.log('finding closest links', closestLink, closestLink.getClientRects())
|
||||||
'finding closest links',
|
|
||||||
closestLink,
|
|
||||||
closestLink.getClientRects()
|
|
||||||
)
|
|
||||||
|
|
||||||
if (
|
if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) {
|
||||||
distances[closestLinkIndex] < 44 &&
|
|
||||||
closestLink.getAttribute('href')
|
|
||||||
) {
|
|
||||||
// Adapt context and local position
|
// Adapt context and local position
|
||||||
let context = this.getContext(closestLink)
|
let context = this.getContext(closestLink)
|
||||||
let local = Points.fromPageToNode(context, globalClick)
|
let local = Points.fromPageToNode(context, globalClick)
|
||||||
|
|||||||
@ -60,10 +60,7 @@ export default class Highlight extends Object {
|
|||||||
if (circle.classList.length == 0) {
|
if (circle.classList.length == 0) {
|
||||||
circle.removeAttribute('class')
|
circle.removeAttribute('class')
|
||||||
}
|
}
|
||||||
if (
|
if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
|
||||||
circle.hasAttribute('id') &&
|
|
||||||
circle.getAttribute('id').startsWith('@@')
|
|
||||||
) {
|
|
||||||
circle.removeAttribute('id')
|
circle.removeAttribute('id')
|
||||||
}
|
}
|
||||||
circle.removeAttribute('data-svg-origin')
|
circle.removeAttribute('data-svg-origin')
|
||||||
@ -78,10 +75,7 @@ export default class Highlight extends Object {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static expand(
|
static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
|
||||||
obj,
|
|
||||||
{ scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
|
|
||||||
) {
|
|
||||||
if (obj == null) return
|
if (obj == null) return
|
||||||
//console.log("expand")
|
//console.log("expand")
|
||||||
obj.classList.add('zooming')
|
obj.classList.add('zooming')
|
||||||
@ -166,9 +160,7 @@ export default class Highlight extends Object {
|
|||||||
this.shrink(maskImage, { stroke })
|
this.shrink(maskImage, { stroke })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let circles = Array.from(circleGroup.children).filter(
|
let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
|
||||||
e => e.tagName == 'circle'
|
|
||||||
)
|
|
||||||
for (let c of circles) {
|
for (let c of circles) {
|
||||||
//console.log("shrinking all circles")
|
//console.log("shrinking all circles")
|
||||||
this.shrink(c, { stroke })
|
this.shrink(c, { stroke })
|
||||||
@ -188,10 +180,7 @@ export default class Highlight extends Object {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
static openHighlight(
|
static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) {
|
||||||
target,
|
|
||||||
{ animation = 0.5, scale = 2, onExpanded = null } = {}
|
|
||||||
) {
|
|
||||||
if (Highlight._isExpanded(target)) {
|
if (Highlight._isExpanded(target)) {
|
||||||
console.log('Target is already expanded!')
|
console.log('Target is already expanded!')
|
||||||
return
|
return
|
||||||
@ -205,10 +194,7 @@ export default class Highlight extends Object {
|
|||||||
let image = parent.querySelector(imageId)
|
let image = parent.querySelector(imageId)
|
||||||
if (image) {
|
if (image) {
|
||||||
this._bringToFront(image)
|
this._bringToFront(image)
|
||||||
} else
|
} else console.error('Could not find corresponding image element.')
|
||||||
console.error(
|
|
||||||
'Could not find corresponding image element.'
|
|
||||||
)
|
|
||||||
} else console.log('Element was no parent:', target)
|
} else console.log('Element was no parent:', target)
|
||||||
}
|
}
|
||||||
this._bringToFront(target)
|
this._bringToFront(target)
|
||||||
@ -253,12 +239,7 @@ export default class Highlight extends Object {
|
|||||||
if (target && parent) {
|
if (target && parent) {
|
||||||
parent.removeChild(target)
|
parent.removeChild(target)
|
||||||
parent.appendChild(target)
|
parent.appendChild(target)
|
||||||
} else
|
} else console.error('Could not bring to front. Either no target or no parent.', target, parent)
|
||||||
console.error(
|
|
||||||
'Could not bring to front. Either no target or no parent.',
|
|
||||||
target,
|
|
||||||
parent
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
|
static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
|
||||||
@ -293,10 +274,7 @@ export default class Highlight extends Object {
|
|||||||
* @returns
|
* @returns
|
||||||
* @memberof Highlight
|
* @memberof Highlight
|
||||||
*/
|
*/
|
||||||
static _createSVGMask(
|
static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
|
||||||
element,
|
|
||||||
{ svgRoot = null, image = null, id = null } = {}
|
|
||||||
) {
|
|
||||||
// We can fetch these values here, but it's more efficient to
|
// We can fetch these values here, but it's more efficient to
|
||||||
// simply pass them in, as it's likely they were already retrieved beforehand.
|
// simply pass them in, as it's likely they were already retrieved beforehand.
|
||||||
if (svgRoot == null) svgRoot = element.closest('svg')
|
if (svgRoot == null) svgRoot = element.closest('svg')
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
</defs>
|
</defs>
|
||||||
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
|
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
|
||||||
<g>
|
<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" />
|
stroke-width="4" />
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
@ -96,8 +96,8 @@
|
|||||||
|
|
||||||
const wrapper2 = new CardWrapper(demoCardWithSelector)
|
const wrapper2 = new CardWrapper(demoCardWithSelector)
|
||||||
wrapper2.handleClicksAsTaps()
|
wrapper2.handleClicksAsTaps()
|
||||||
wrapper2.onTap('circle', event => {
|
wrapper2.onTap('circle', (event, node) => {
|
||||||
Card.loadHighlightPopup(event)
|
Card.loadHighlightPopup(event, node)
|
||||||
})
|
})
|
||||||
|
|
||||||
wrapper2.onTap('a', event => {
|
wrapper2.onTap('a', event => {
|
||||||
|
|||||||
@ -48,10 +48,7 @@ export class CardPluginBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_getVerificationFunctions(context) {
|
_getVerificationFunctions(context) {
|
||||||
return [
|
return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)]
|
||||||
this._verifyContext.bind(this, context),
|
|
||||||
this._verifyRequirements.bind(this, context)
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_verifyContext(context) {
|
_verifyContext(context) {
|
||||||
@ -139,11 +136,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
|||||||
constructor(
|
constructor(
|
||||||
wrapperSelector,
|
wrapperSelector,
|
||||||
overlaySelector = null,
|
overlaySelector = null,
|
||||||
{
|
{ zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {}
|
||||||
zoomAnimationDuration = 0.4,
|
|
||||||
fadeAnimationDuration = 0.4,
|
|
||||||
interactionType = 'tap'
|
|
||||||
} = {}
|
|
||||||
) {
|
) {
|
||||||
super()
|
super()
|
||||||
this.wrapperSelector = wrapperSelector
|
this.wrapperSelector = wrapperSelector
|
||||||
@ -160,14 +153,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
|||||||
|
|
||||||
_getVerificationFunctions(context) {
|
_getVerificationFunctions(context) {
|
||||||
let arr = super._getVerificationFunctions(context)
|
let arr = super._getVerificationFunctions(context)
|
||||||
let funcs = [
|
let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)]
|
||||||
this._verifyElementsExist.bind(
|
|
||||||
this,
|
|
||||||
context,
|
|
||||||
this.wrapperSelector,
|
|
||||||
this.overlaySelector
|
|
||||||
)
|
|
||||||
]
|
|
||||||
return arr.concat(funcs)
|
return arr.concat(funcs)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -252,9 +238,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
|||||||
* The minor side should not exceed the height of the context window.
|
* The minor side should not exceed the height of the context window.
|
||||||
*/
|
*/
|
||||||
const maxMinorSize =
|
const maxMinorSize =
|
||||||
context.offsetHeight -
|
context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop)
|
||||||
2 * parseInt(headerStlye.paddingTop) -
|
|
||||||
2 * parseInt(headerStlye.marginTop)
|
|
||||||
|
|
||||||
const max = {
|
const max = {
|
||||||
width: context.offsetWidth * maxFillRatio,
|
width: context.offsetWidth * maxFillRatio,
|
||||||
@ -284,10 +268,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
|||||||
// const minorImageSize = getImageSize(minorSide)
|
// const minorImageSize = getImageSize(minorSide)
|
||||||
|
|
||||||
let ratio = getImageSize(minorSide) / getImageSize(majorSide)
|
let ratio = getImageSize(minorSide) / getImageSize(majorSide)
|
||||||
let size =
|
let size = majorImageSize > max[majorSide.name] ? max[majorSide.name] : majorImageSize
|
||||||
majorImageSize > max[majorSide.name]
|
|
||||||
? max[majorSide.name]
|
|
||||||
: majorImageSize
|
|
||||||
|
|
||||||
if (size * ratio > maxMinorSize) {
|
if (size * ratio > maxMinorSize) {
|
||||||
size = maxMinorSize / ratio
|
size = maxMinorSize / ratio
|
||||||
@ -298,10 +279,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
|||||||
height: 0
|
height: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
let position = Points.fromPageToNode(
|
let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
|
||||||
context,
|
|
||||||
Points.fromNodeToPage(source, { x: 0, y: 0 })
|
|
||||||
)
|
|
||||||
|
|
||||||
let targetOffset = {
|
let targetOffset = {
|
||||||
x: 0,
|
x: 0,
|
||||||
@ -312,13 +290,9 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
|||||||
targetDimensions[minorSide.name] = size * ratio
|
targetDimensions[minorSide.name] = size * ratio
|
||||||
|
|
||||||
targetOffset[majorSide.axis] =
|
targetOffset[majorSide.axis] =
|
||||||
(context['offset' + capitalize(majorSide.name)] -
|
(context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2
|
||||||
targetDimensions[majorSide.name]) /
|
|
||||||
2
|
|
||||||
targetOffset[minorSide.axis] =
|
targetOffset[minorSide.axis] =
|
||||||
(context['offset' + capitalize(minorSide.name)] -
|
(context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2
|
||||||
targetDimensions[minorSide.name]) /
|
|
||||||
2
|
|
||||||
|
|
||||||
overlay.appendChild(imageWrapper)
|
overlay.appendChild(imageWrapper)
|
||||||
|
|
||||||
@ -358,18 +332,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
|||||||
}
|
}
|
||||||
|
|
||||||
getBorderHeight(style) {
|
getBorderHeight(style) {
|
||||||
const borderWidth =
|
const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
|
||||||
parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
|
const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom)
|
||||||
const padding =
|
|
||||||
parseInt(style.paddingTop) + parseInt(style.paddingBottom)
|
|
||||||
return parseInt(style.width) + borderWidth + padding
|
return parseInt(style.width) + borderWidth + padding
|
||||||
}
|
}
|
||||||
|
|
||||||
getBorderWidth(style) {
|
getBorderWidth(style) {
|
||||||
const borderWidth =
|
const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
|
||||||
parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
|
const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight)
|
||||||
const padding =
|
|
||||||
parseInt(style.paddingLeft) + parseInt(style.paddingRight)
|
|
||||||
return parseInt(style.width) + borderWidth + padding
|
return parseInt(style.width) + borderWidth + padding
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -404,16 +374,12 @@ CardPlugin.Ui = class UiPlugin extends CardPluginBase {
|
|||||||
_doesParentExist(context, parent) {
|
_doesParentExist(context, parent) {
|
||||||
if (parent == null) return true
|
if (parent == null) return true
|
||||||
let valid = context.querySelector(parent) != null
|
let valid = context.querySelector(parent) != null
|
||||||
if (!valid)
|
if (!valid) console.error('Could not find parent on context.', context, parent)
|
||||||
console.error('Could not find parent on context.', context, parent)
|
|
||||||
return valid
|
return valid
|
||||||
}
|
}
|
||||||
|
|
||||||
append(context) {
|
append(context) {
|
||||||
parent =
|
parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container)
|
||||||
this.parent == null
|
|
||||||
? context
|
|
||||||
: context.querySelector(this.parent).appendChild(container)
|
|
||||||
let container = document.createElement('div')
|
let container = document.createElement('div')
|
||||||
container.className = this.className
|
container.className = this.className
|
||||||
parent.appendChild(container)
|
parent.appendChild(container)
|
||||||
@ -513,15 +479,8 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
|||||||
|
|
||||||
utterance.onboundary = () => {
|
utterance.onboundary = () => {
|
||||||
console.log('onboundary', node.innerText)
|
console.log('onboundary', node.innerText)
|
||||||
if (
|
if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) {
|
||||||
this.currentText.substring(0, 5) !=
|
console.log('text for speech synth changed!', this.currentText, node.innerText)
|
||||||
node.innerText.substring(0, 5)
|
|
||||||
) {
|
|
||||||
console.log(
|
|
||||||
'text for speech synth changed!',
|
|
||||||
this.currentText,
|
|
||||||
node.innerText
|
|
||||||
)
|
|
||||||
this._stop()
|
this._stop()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -63,11 +63,7 @@ export default class ScatterCard extends Card {
|
|||||||
* @returns
|
* @returns
|
||||||
* @memberof Card
|
* @memberof Card
|
||||||
*/
|
*/
|
||||||
static createCardScatter(
|
static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) {
|
||||||
html,
|
|
||||||
scatterContainer,
|
|
||||||
{ basePath = './', modules = [] } = {}
|
|
||||||
) {
|
|
||||||
let element = document.createElement('div')
|
let element = document.createElement('div')
|
||||||
|
|
||||||
scatterContainer.element.appendChild(element)
|
scatterContainer.element.appendChild(element)
|
||||||
@ -94,11 +90,7 @@ export default class ScatterCard extends Card {
|
|||||||
* @returns
|
* @returns
|
||||||
* @memberof CardScatter
|
* @memberof CardScatter
|
||||||
*/
|
*/
|
||||||
static loadAndCreateScatterCard(
|
static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [], onClose = null } = {}) {
|
||||||
scatterContainer,
|
|
||||||
item,
|
|
||||||
{ basePath = '../', modules = [], onClose = null } = {}
|
|
||||||
) {
|
|
||||||
console.log(basePath)
|
console.log(basePath)
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let url = basePath + '/' + item + '/index.html'
|
let url = basePath + '/' + item + '/index.html'
|
||||||
@ -106,14 +98,10 @@ export default class ScatterCard extends Card {
|
|||||||
this.loadHTML(url)
|
this.loadHTML(url)
|
||||||
.then(html => {
|
.then(html => {
|
||||||
console.log('Received', html)
|
console.log('Received', html)
|
||||||
let element = this.createCardScatter(
|
let element = this.createCardScatter(html, scatterContainer, {
|
||||||
html,
|
|
||||||
scatterContainer,
|
|
||||||
{
|
|
||||||
basePath,
|
basePath,
|
||||||
modules
|
modules
|
||||||
}
|
})
|
||||||
)
|
|
||||||
if (onClose) this.addOnCloseListener(element, onClose)
|
if (onClose) this.addOnCloseListener(element, onClose)
|
||||||
resolve(element)
|
resolve(element)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -5,10 +5,7 @@ import Events from '../events.js'
|
|||||||
import { Points } from '../utils.js'
|
import { Points } from '../utils.js'
|
||||||
|
|
||||||
export default class CardWrapper extends Object {
|
export default class CardWrapper extends Object {
|
||||||
constructor(
|
constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
|
||||||
domNode,
|
|
||||||
{ triggerSVGClicks = true, allowClickDistance = 44 } = {}
|
|
||||||
) {
|
|
||||||
super()
|
super()
|
||||||
this.domNode = domNode
|
this.domNode = domNode
|
||||||
this.triggerSVGClicks = triggerSVGClicks
|
this.triggerSVGClicks = triggerSVGClicks
|
||||||
@ -99,9 +96,7 @@ export default class CardWrapper extends Object {
|
|||||||
nearestActive(event) {
|
nearestActive(event) {
|
||||||
let element = this.domNode
|
let element = this.domNode
|
||||||
let activeNodes = this.activeNodes()
|
let activeNodes = this.activeNodes()
|
||||||
let globalClick = event.center
|
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
|
||||||
? event.center
|
|
||||||
: { x: event.x, y: event.y }
|
|
||||||
let localClick = Points.fromPageToNode(element, globalClick)
|
let localClick = Points.fromPageToNode(element, globalClick)
|
||||||
|
|
||||||
let clickRects = activeNodes.map(link => {
|
let clickRects = activeNodes.map(link => {
|
||||||
@ -154,7 +149,7 @@ export default class CardWrapper extends Object {
|
|||||||
}
|
}
|
||||||
|
|
||||||
nodeTapped(node, event) {
|
nodeTapped(node, event) {
|
||||||
console.log("nodeTapped", node, this.isClickable(node))
|
console.log('nodeTapped', node, this.isClickable(node))
|
||||||
if (this.isClickable(node)) {
|
if (this.isClickable(node)) {
|
||||||
this.simulateClick(node, event)
|
this.simulateClick(node, event)
|
||||||
return true
|
return true
|
||||||
@ -165,7 +160,7 @@ export default class CardWrapper extends Object {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
for (let [selector, handler] of this.tapHandler.entries()) {
|
for (let [selector, handler] of this.tapHandler.entries()) {
|
||||||
console.log("nodeTapped", selector)
|
console.log('nodeTapped', selector)
|
||||||
for (let obj of this.domNode.querySelectorAll(selector)) {
|
for (let obj of this.domNode.querySelectorAll(selector)) {
|
||||||
if (node == obj) {
|
if (node == obj) {
|
||||||
handler(event, node)
|
handler(event, node)
|
||||||
@ -177,10 +172,9 @@ export default class CardWrapper extends Object {
|
|||||||
}
|
}
|
||||||
|
|
||||||
tap(event, calledBy = 'unknown') {
|
tap(event, calledBy = 'unknown') {
|
||||||
|
|
||||||
if (event.isTrusted) {
|
if (event.isTrusted) {
|
||||||
let node = this.nearestActive(event)
|
let node = this.nearestActive(event)
|
||||||
console.log("tap", node)
|
console.log('tap', node)
|
||||||
this.nodeTapped(node, event)
|
this.nodeTapped(node, event)
|
||||||
|
|
||||||
/* let node = document.elementFromPoint(event.clientX, event.clientY)
|
/* let node = document.elementFromPoint(event.clientX, event.clientY)
|
||||||
|
|||||||
@ -30,32 +30,21 @@ export default class Doctest {
|
|||||||
static expect(expr, value) {
|
static expect(expr, value) {
|
||||||
if (this.pprint(expr) != this.pprint(value)) {
|
if (this.pprint(expr) != this.pprint(value)) {
|
||||||
//throw new Error("got `" + expr + "` but expected `" + value + "`.")
|
//throw new Error("got `" + expr + "` but expected `" + value + "`.")
|
||||||
throw new Error(
|
throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.')
|
||||||
'got `' +
|
|
||||||
this.pprint(expr) +
|
|
||||||
'` but expected `' +
|
|
||||||
this.pprint(value) +
|
|
||||||
'`.'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static expectError(error, message) {
|
static expectError(error, message) {
|
||||||
let index = error.toString().indexOf(message)
|
let index = error.toString().indexOf(message)
|
||||||
if (index < 0) {
|
if (index < 0) {
|
||||||
throw new Error(
|
throw new Error('got `' + message + '` but expected `' + error + '`.')
|
||||||
'got `' + message + '` but expected `' + error + '`.'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static expectLog(...messages) {
|
static expectLog(...messages) {
|
||||||
// if (!docTestLogMessages.equals(messages)) {
|
// if (!docTestLogMessages.equals(messages)) {
|
||||||
docTestLogMessages.forEach((msg, i) => {
|
docTestLogMessages.forEach((msg, i) => {
|
||||||
if (msg != messages[i])
|
if (msg != messages[i]) throw new Error('Unexpected log message: `' + messages[i] + '`.')
|
||||||
throw new Error(
|
|
||||||
'Unexpected log message: `' + messages[i] + '`.'
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
// throw new Error('Uups')
|
// throw new Error('Uups')
|
||||||
//}
|
//}
|
||||||
@ -104,10 +93,7 @@ export default class Doctest {
|
|||||||
let lines = text.value.split('\n')
|
let lines = text.value.split('\n')
|
||||||
let better = []
|
let better = []
|
||||||
for (let line of lines) {
|
for (let line of lines) {
|
||||||
if (
|
if (replaceExpect && line.trim().startsWith('Doctest.expect(')) {
|
||||||
replaceExpect &&
|
|
||||||
line.trim().startsWith('Doctest.expect(')
|
|
||||||
) {
|
|
||||||
line = line.replace(/Doctest\.expect\(/, '>>> ').trim()
|
line = line.replace(/Doctest\.expect\(/, '>>> ').trim()
|
||||||
if (line.endsWith(')') || line.endsWith(',')) {
|
if (line.endsWith(')') || line.endsWith(',')) {
|
||||||
line = line.slice(0, -1)
|
line = line.slice(0, -1)
|
||||||
|
|||||||
@ -38,8 +38,7 @@ export default class Events {
|
|||||||
// be this is a bug or a security feature. Workaround: we introduce
|
// be this is a bug or a security feature. Workaround: we introduce
|
||||||
// a mouseDownSubstitute attribute that can be assigned to cloned
|
// a mouseDownSubstitute attribute that can be assigned to cloned
|
||||||
// events after instantiation.
|
// events after instantiation.
|
||||||
if (Reflect.has(event, 'mouseDownSubstitute'))
|
if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute
|
||||||
return event.mouseDownSubstitute
|
|
||||||
return event.buttons || event.which
|
return event.buttons || event.which
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,15 +73,7 @@ export default class Events {
|
|||||||
for (let i = 0; i < targets.length; i++) {
|
for (let i = 0; i < targets.length; i++) {
|
||||||
let t = targets[i]
|
let t = targets[i]
|
||||||
let touchTarget = document.elementFromPoint(t.pageX, t.pageY)
|
let touchTarget = document.elementFromPoint(t.pageX, t.pageY)
|
||||||
let touch = new Touch(
|
let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY)
|
||||||
undefined,
|
|
||||||
touchTarget,
|
|
||||||
t.identifier,
|
|
||||||
t.pageX,
|
|
||||||
t.pageY,
|
|
||||||
t.screenX,
|
|
||||||
t.screenY
|
|
||||||
)
|
|
||||||
touches.push(touch)
|
touches.push(touch)
|
||||||
}
|
}
|
||||||
return new TouchList(...touches)
|
return new TouchList(...touches)
|
||||||
@ -166,8 +157,7 @@ export default class Events {
|
|||||||
let result = event.type
|
let result = event.type
|
||||||
let selector = this.selector(event.target)
|
let selector = this.selector(event.target)
|
||||||
result += ' selector: ' + selector
|
result += ' selector: ' + selector
|
||||||
if (event.target != document.querySelector(selector))
|
if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector)
|
||||||
console.log('Cannot resolve', selector)
|
|
||||||
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY']
|
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY']
|
||||||
for (let key of keys) {
|
for (let key of keys) {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
/* global PDFJS Power1 */
|
||||||
import { getId } from './utils.js'
|
import { getId } from './utils.js'
|
||||||
import { DOMScatter } from './scatter.js'
|
import { DOMScatter } from './scatter.js'
|
||||||
import { InteractionMapper } from './interaction.js'
|
|
||||||
|
|
||||||
export class CardLoader {
|
export class CardLoader {
|
||||||
constructor(
|
constructor(
|
||||||
@ -22,7 +23,7 @@ export class CardLoader {
|
|||||||
this.x = x
|
this.x = x
|
||||||
this.y = y
|
this.y = y
|
||||||
this.scale = scale
|
this.scale = scale
|
||||||
this.rotation = 0
|
this.rotation = rotation
|
||||||
this.maxScale = maxScale
|
this.maxScale = maxScale
|
||||||
this.minScale = minScale
|
this.minScale = minScale
|
||||||
this.wantedWidth = width
|
this.wantedWidth = width
|
||||||
@ -30,12 +31,6 @@ export class CardLoader {
|
|||||||
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth
|
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth
|
||||||
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
|
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
|
||||||
this.addedNode = null
|
this.addedNode = null
|
||||||
console.log({
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
maxWidth,
|
|
||||||
maxHeight
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
unload() {
|
unload() {
|
||||||
@ -120,7 +115,6 @@ export class FrameLoader extends CardLoader {
|
|||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let isFrame = domNode instanceof HTMLIFrameElement
|
let isFrame = domNode instanceof HTMLIFrameElement
|
||||||
let iframe = isFrame ? domNode : document.createElement('iframe')
|
let iframe = isFrame ? domNode : document.createElement('iframe')
|
||||||
console.log('FrameLoader.load', isFrame, iframe, this.src)
|
|
||||||
iframe.frameBorder = 0
|
iframe.frameBorder = 0
|
||||||
iframe.style.scrolling = false
|
iframe.style.scrolling = false
|
||||||
iframe.width = this.wantedWidth
|
iframe.width = this.wantedWidth
|
||||||
@ -147,14 +141,9 @@ export class HTMLLoader extends CardLoader {
|
|||||||
let xhr = new XMLHttpRequest()
|
let xhr = new XMLHttpRequest()
|
||||||
xhr.open('GET', this.src, false)
|
xhr.open('GET', this.src, false)
|
||||||
xhr.onload = e => {
|
xhr.onload = e => {
|
||||||
domNode.innerHTML = xhr.response
|
domNode.innerHTML = this.prepare(xhr.response)
|
||||||
this.addedNode = domNode.firstElementChild
|
this.addedNode = domNode.firstElementChild
|
||||||
let { width, height } = this.size(this.addedNode)
|
let { width, height } = this.size(this.addedNode)
|
||||||
console.log('HTMLLoader.load', {
|
|
||||||
added: this.addedNode,
|
|
||||||
width,
|
|
||||||
height
|
|
||||||
})
|
|
||||||
if (width) this.wantedWidth = width || this.wantedWidth
|
if (width) this.wantedWidth = width || this.wantedWidth
|
||||||
if (height) this.wantedHeight = height || this.wantedHeight
|
if (height) this.wantedHeight = height || this.wantedHeight
|
||||||
resolve(this)
|
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.
|
* Tries to determine the size of the addedNode.
|
||||||
* Checks for explicit width and height style attributes.
|
* Checks for explicit width and height style attributes.
|
||||||
@ -258,10 +259,7 @@ export class DOMFlip {
|
|||||||
|
|
||||||
frontLoaded(loader) {
|
frontLoaded(loader) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let scatter = new DOMScatter(
|
let scatter = new DOMScatter(this.cardWrapper, this.domScatterContainer, {
|
||||||
this.cardWrapper,
|
|
||||||
this.domScatterContainer,
|
|
||||||
{
|
|
||||||
x: loader.x,
|
x: loader.x,
|
||||||
y: loader.y,
|
y: loader.y,
|
||||||
startScale: loader.scale,
|
startScale: loader.scale,
|
||||||
@ -275,11 +273,8 @@ export class DOMFlip {
|
|||||||
scalable: this.scalable,
|
scalable: this.scalable,
|
||||||
rotatable: this.rotatable,
|
rotatable: this.rotatable,
|
||||||
overdoScaling: this.overdoScaling,
|
overdoScaling: this.overdoScaling,
|
||||||
tapDelegate: this.tapDelegateFactory
|
tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null
|
||||||
? this.tapDelegateFactory(this.cardWrapper)
|
})
|
||||||
: null
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
if (this.center) {
|
if (this.center) {
|
||||||
scatter.centerAt(this.center)
|
scatter.centerAt(this.center)
|
||||||
@ -296,9 +291,7 @@ export class DOMFlip {
|
|||||||
|
|
||||||
//Remove callback
|
//Remove callback
|
||||||
if (scatter.onTransform) {
|
if (scatter.onTransform) {
|
||||||
let callbackIdx = scatter.onTransform.indexOf(
|
let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale)
|
||||||
removeOnMinScale
|
|
||||||
)
|
|
||||||
scatter.onTransform.splice(callbackIdx, 1)
|
scatter.onTransform.splice(callbackIdx, 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -329,7 +322,6 @@ export class DOMFlip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setupFlippable(flippable, loader) {
|
setupFlippable(flippable, loader) {
|
||||||
console.log('setupFlippable', loader.wantedWidth)
|
|
||||||
flippable.wantedWidth = loader.wantedWidth
|
flippable.wantedWidth = loader.wantedWidth
|
||||||
flippable.wantedHeight = loader.wantedHeight
|
flippable.wantedHeight = loader.wantedHeight
|
||||||
flippable.wantedScale = loader.scale
|
flippable.wantedScale = loader.scale
|
||||||
@ -339,7 +331,6 @@ export class DOMFlip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
start({ targetCenter = null } = {}) {
|
start({ targetCenter = null } = {}) {
|
||||||
console.log('DOMFlip.start', targetCenter)
|
|
||||||
if (this.preloadBack) {
|
if (this.preloadBack) {
|
||||||
this.flippable.start({ duration: this.flipDuration, targetCenter })
|
this.flippable.start({ duration: this.flipDuration, targetCenter })
|
||||||
} else {
|
} else {
|
||||||
@ -489,7 +480,6 @@ export class DOMFlippable {
|
|||||||
|
|
||||||
clickInfo() {
|
clickInfo() {
|
||||||
this.bringToFront()
|
this.bringToFront()
|
||||||
console.log('clickInfo')
|
|
||||||
this.infoBtn.click()
|
this.infoBtn.click()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -516,6 +506,7 @@ export class DOMFlippable {
|
|||||||
let startScale = this.element._gsTransform.scaleX
|
let startScale = this.element._gsTransform.scaleX
|
||||||
let w = this.element.style.width
|
let w = this.element.style.width
|
||||||
let h = this.element.style.height
|
let h = this.element.style.height
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.log(info, startX, startY, startAngle, startScale, w, h)
|
console.log(info, startX, startY, startAngle, startScale, w, h)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -572,9 +563,7 @@ export class DOMFlippable {
|
|||||||
|
|
||||||
this.flipped = !this.flipped
|
this.flipped = !this.flipped
|
||||||
let targetY = this.flipped ? 180 : 0
|
let targetY = this.flipped ? 180 : 0
|
||||||
let targetZ = this.flipped
|
let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle
|
||||||
? this.startAngle + this.targetRotation(this.startAngle)
|
|
||||||
: this.startAngle
|
|
||||||
let targetScale = this.flipped ? this.wantedScale : this.startScale
|
let targetScale = this.flipped ? this.wantedScale : this.startScale
|
||||||
let w = this.flipped ? this.wantedWidth : this.startWidth
|
let w = this.flipped ? this.wantedWidth : this.startWidth
|
||||||
let h = this.flipped ? this.wantedHeight : this.startHeight
|
let h = this.flipped ? this.wantedHeight : this.startHeight
|
||||||
@ -587,14 +576,12 @@ export class DOMFlippable {
|
|||||||
let y = this.flipped ? yy : this.startY
|
let y = this.flipped ? yy : this.startY
|
||||||
|
|
||||||
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
|
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
|
||||||
console.log('start', this.flipDuration)
|
|
||||||
TweenLite.to(this.card, this.flipDuration, {
|
TweenLite.to(this.card, this.flipDuration, {
|
||||||
rotationY: targetY,
|
rotationY: targetY,
|
||||||
ease: Power1.easeOut,
|
ease: Power1.easeOut,
|
||||||
transformOrigin: '50% 50%',
|
transformOrigin: '50% 50%',
|
||||||
onUpdate,
|
onUpdate,
|
||||||
onComplete: e => {
|
onComplete: e => {
|
||||||
console.log('start end', this.flipDuration)
|
|
||||||
if (this.flipped) {
|
if (this.flipped) {
|
||||||
//this.hide(this.front)
|
//this.hide(this.front)
|
||||||
this.enable(this.backBtn)
|
this.enable(this.backBtn)
|
||||||
@ -625,8 +612,6 @@ export class DOMFlippable {
|
|||||||
},
|
},
|
||||||
force3D: true
|
force3D: true
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log('start 2', this.wantedWidth, this.startWidth, { w, h })
|
|
||||||
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
|
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
|
||||||
TweenLite.to(this.element, this.flipDuration / 2, {
|
TweenLite.to(this.element, this.flipDuration / 2, {
|
||||||
scale: targetScale,
|
scale: targetScale,
|
||||||
|
|||||||
@ -59,15 +59,7 @@ export class FrameTarget {
|
|||||||
let point = pointMap.get(key)
|
let point = pointMap.get(key)
|
||||||
let p = Points.fromPageToNode(this.frame, point)
|
let p = Points.fromPageToNode(this.frame, point)
|
||||||
let touchTarget = doc.elementFromPoint(p.x, p.y)
|
let touchTarget = doc.elementFromPoint(p.x, p.y)
|
||||||
let touch = new Touch(
|
let touch = new Touch(undefined, touchTarget, key, p.x, p.y, p.x, p.y)
|
||||||
undefined,
|
|
||||||
touchTarget,
|
|
||||||
key,
|
|
||||||
p.x,
|
|
||||||
p.y,
|
|
||||||
p.x,
|
|
||||||
p.y
|
|
||||||
)
|
|
||||||
touches.push(touch)
|
touches.push(touch)
|
||||||
}
|
}
|
||||||
return new TouchList(...touches)
|
return new TouchList(...touches)
|
||||||
@ -102,12 +94,7 @@ export class FrameTarget {
|
|||||||
this.target.dispatchEvent(touchEvent)
|
this.target.dispatchEvent(touchEvent)
|
||||||
}
|
}
|
||||||
|
|
||||||
simulateTouchEventSafari(
|
simulateTouchEventSafari(type, point, pointMap, touchEventKey = 'targetTouches') {
|
||||||
type,
|
|
||||||
point,
|
|
||||||
pointMap,
|
|
||||||
touchEventKey = 'targetTouches'
|
|
||||||
) {
|
|
||||||
let p = Points.fromPageToNode(this.frame, point)
|
let p = Points.fromPageToNode(this.frame, point)
|
||||||
let data = {
|
let data = {
|
||||||
view: this.frame.contentWindow,
|
view: this.frame.contentWindow,
|
||||||
@ -131,9 +118,7 @@ export class FrameTarget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
isMouseLikeEvent(event) {
|
isMouseLikeEvent(event) {
|
||||||
return (
|
return event.type.startsWith('mouse') || event.type.startsWith('pointer')
|
||||||
event.type.startsWith('mouse') || event.type.startsWith('pointer')
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onStart(event, interaction) {
|
onStart(event, interaction) {
|
||||||
@ -142,11 +127,7 @@ export class FrameTarget {
|
|||||||
if (this.isMouseLikeEvent(event)) {
|
if (this.isMouseLikeEvent(event)) {
|
||||||
this.simulateMouseEvent('mousedown', point)
|
this.simulateMouseEvent('mousedown', point)
|
||||||
} else {
|
} else {
|
||||||
this.simulateTouchEvent(
|
this.simulateTouchEvent('touchstart', point, interaction.current)
|
||||||
'touchstart',
|
|
||||||
point,
|
|
||||||
interaction.current
|
|
||||||
)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -170,12 +151,7 @@ export class FrameTarget {
|
|||||||
if (this.isMouseLikeEvent(event)) {
|
if (this.isMouseLikeEvent(event)) {
|
||||||
this.simulateMouseEvent('mouseend', point)
|
this.simulateMouseEvent('mouseend', point)
|
||||||
} else {
|
} else {
|
||||||
this.simulateTouchEvent(
|
this.simulateTouchEvent('touchend', point, interaction.ended, 'changedTouches')
|
||||||
'touchend',
|
|
||||||
point,
|
|
||||||
interaction.ended,
|
|
||||||
'changedTouches'
|
|
||||||
)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -253,17 +253,8 @@ export class InteractionPoints {
|
|||||||
let c2 = current[1]
|
let c2 = current[1]
|
||||||
let distance2 = Points.distance(c1, c2)
|
let distance2 = Points.distance(c1, c2)
|
||||||
|
|
||||||
return new InteractionDelta(
|
return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, count, distance2)
|
||||||
delta.x,
|
} else {
|
||||||
delta.y,
|
|
||||||
zoom,
|
|
||||||
alpha,
|
|
||||||
cm,
|
|
||||||
count,
|
|
||||||
distance2
|
|
||||||
)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -303,33 +294,14 @@ export class InteractionPoints {
|
|||||||
let currentAngle = Points.angle(c1, c2)
|
let currentAngle = Points.angle(c1, c2)
|
||||||
let previousAngle = Points.angle(p1, p2)
|
let previousAngle = Points.angle(p1, p2)
|
||||||
let alpha = this.diffAngle(currentAngle, previousAngle)
|
let alpha = this.diffAngle(currentAngle, previousAngle)
|
||||||
return new InteractionDelta(
|
return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize, distance2)
|
||||||
delta.x,
|
} else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
|
||||||
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
|
// We need to ensure that the keys are the same, since single points with different keys
|
||||||
// can jump
|
// can jump
|
||||||
let current = this.current.first()
|
let current = this.current.first()
|
||||||
let previous = this.previous.first()
|
let previous = this.previous.first()
|
||||||
let delta = Points.subtract(current, previous)
|
let delta = Points.subtract(current, previous)
|
||||||
return new InteractionDelta(
|
return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current, csize)
|
||||||
delta.x,
|
|
||||||
delta.y,
|
|
||||||
1.0,
|
|
||||||
0.0,
|
|
||||||
current,
|
|
||||||
csize
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
@ -483,11 +455,7 @@ export class Interaction extends InteractionPoints {
|
|||||||
isTap(key) {
|
isTap(key) {
|
||||||
let ended = this.ended.get(key)
|
let ended = this.ended.get(key)
|
||||||
let start = this.start.get(key)
|
let start = this.start.get(key)
|
||||||
if (
|
if (start && ended && Points.distance(ended, start) < this.tapDistance) {
|
||||||
start &&
|
|
||||||
ended &&
|
|
||||||
Points.distance(ended, start) < this.tapDistance
|
|
||||||
) {
|
|
||||||
let t1 = this.timestamps.get(key)
|
let t1 = this.timestamps.get(key)
|
||||||
let tookLong = performance.now() > t1 + this.longPressTime
|
let tookLong = performance.now() > t1 + this.longPressTime
|
||||||
if (tookLong) {
|
if (tookLong) {
|
||||||
@ -509,10 +477,7 @@ export class Interaction extends InteractionPoints {
|
|||||||
this.unregisterTap(key)
|
this.unregisterTap(key)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (
|
if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
|
||||||
this.tapTimestamps.has(key) &&
|
|
||||||
performance.now() > this.tapTimestamps.get(key) + this.tapDuration
|
|
||||||
) {
|
|
||||||
//console.log("tap too long")
|
//console.log("tap too long")
|
||||||
this.unregisterTap(key)
|
this.unregisterTap(key)
|
||||||
}
|
}
|
||||||
@ -537,11 +502,7 @@ export class Interaction extends InteractionPoints {
|
|||||||
isLongPress(key) {
|
isLongPress(key) {
|
||||||
let ended = this.ended.get(key)
|
let ended = this.ended.get(key)
|
||||||
let start = this.start.get(key)
|
let start = this.start.get(key)
|
||||||
if (
|
if (start && ended && Points.distance(ended, start) < this.tapDistance) {
|
||||||
start &&
|
|
||||||
ended &&
|
|
||||||
Points.distance(ended, start) < this.tapDistance
|
|
||||||
) {
|
|
||||||
let t1 = this.timestamps.get(key)
|
let t1 = this.timestamps.get(key)
|
||||||
let tookLong = performance.now() > t1 + this.longPressTime
|
let tookLong = performance.now() > t1 + this.longPressTime
|
||||||
if (tookLong) {
|
if (tookLong) {
|
||||||
@ -608,9 +569,7 @@ export class InteractionDelegate {
|
|||||||
|
|
||||||
setupInteraction() {
|
setupInteraction() {
|
||||||
if (this.debug) {
|
if (this.debug) {
|
||||||
let error = this.targetInterface.implementationError(
|
let error = this.targetInterface.implementationError(this.target.constructor)
|
||||||
this.target.constructor
|
|
||||||
)
|
|
||||||
if (error != null) {
|
if (error != null) {
|
||||||
throw new Error('Expected IInteractionTarget: ' + error)
|
throw new Error('Expected IInteractionTarget: ' + error)
|
||||||
}
|
}
|
||||||
@ -648,16 +607,11 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointermove',
|
'pointermove',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
|
||||||
console.log('pointermove', e.pointerId, e.pointerType)
|
|
||||||
|
|
||||||
if (
|
if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
|
||||||
e.pointerType == 'touch' ||
|
|
||||||
(e.pointerType == 'mouse' && Events.isPointerDown(e))
|
|
||||||
) {
|
|
||||||
// this.capture(e) &&
|
// this.capture(e) &&
|
||||||
if (this.debug)
|
if (this.debug) console.log('pointermove captured', e.pointerId)
|
||||||
console.log('pointermove captured', e.pointerId)
|
|
||||||
this.onMove(e)
|
this.onMove(e)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -666,8 +620,7 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointerup',
|
'pointerup',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
|
||||||
console.log('pointerup', e.pointerId, e.pointerType)
|
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
if (this.capturePointerEvents) {
|
if (this.capturePointerEvents) {
|
||||||
try {
|
try {
|
||||||
@ -682,11 +635,9 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointercancel',
|
'pointercancel',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
|
||||||
console.log('pointercancel', e.pointerId, e.pointerType)
|
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
if (this.capturePointerEvents)
|
if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
|
||||||
element.releasePointerCapture(e.pointerId)
|
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
)
|
)
|
||||||
@ -695,12 +646,7 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointerleave',
|
'pointerleave',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
|
||||||
console.log(
|
|
||||||
'pointerleave',
|
|
||||||
e.pointerId,
|
|
||||||
e.pointerType
|
|
||||||
)
|
|
||||||
if (e.target == element) this.onEnd(e)
|
if (e.target == element) this.onEnd(e)
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
@ -711,12 +657,7 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointerout',
|
'pointerout',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
|
||||||
console.log(
|
|
||||||
'pointerout',
|
|
||||||
e.pointerId,
|
|
||||||
e.pointerType
|
|
||||||
)
|
|
||||||
if (e.target == element) this.onEnd(e)
|
if (e.target == element) this.onEnd(e)
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
@ -727,13 +668,7 @@ export class InteractionDelegate {
|
|||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'pointerout',
|
'pointerout',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
|
||||||
console.log(
|
|
||||||
'pointerout',
|
|
||||||
e.pointerId,
|
|
||||||
e.pointerType,
|
|
||||||
e.target
|
|
||||||
)
|
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
}
|
}
|
||||||
@ -746,8 +681,7 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'touchstart',
|
'touchstart',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('touchstart', this.touchPoints(e))
|
||||||
console.log('touchstart', this.touchPoints(e))
|
|
||||||
if (this.capture(e)) {
|
if (this.capture(e)) {
|
||||||
for (let touch of e.changedTouches) {
|
for (let touch of e.changedTouches) {
|
||||||
this.onStart(touch)
|
this.onStart(touch)
|
||||||
@ -759,8 +693,7 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'touchmove',
|
'touchmove',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('touchmove', this.touchPoints(e), e)
|
||||||
console.log('touchmove', this.touchPoints(e), e)
|
|
||||||
for (let touch of e.changedTouches) {
|
for (let touch of e.changedTouches) {
|
||||||
this.onMove(touch)
|
this.onMove(touch)
|
||||||
}
|
}
|
||||||
@ -783,12 +716,7 @@ export class InteractionDelegate {
|
|||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'touchcancel',
|
'touchcancel',
|
||||||
e => {
|
e => {
|
||||||
if (this.debug)
|
if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
|
||||||
console.log(
|
|
||||||
'touchcancel',
|
|
||||||
e.targetTouches.length,
|
|
||||||
e.changedTouches.length
|
|
||||||
)
|
|
||||||
for (let touch of e.changedTouches) {
|
for (let touch of e.changedTouches) {
|
||||||
this.onEnd(touch)
|
this.onEnd(touch)
|
||||||
}
|
}
|
||||||
@ -837,9 +765,7 @@ export class InteractionDelegate {
|
|||||||
e => {
|
e => {
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
console.warn(
|
console.warn("Shouldn't happen: mouseout ends interaction")
|
||||||
"Shouldn't happen: mouseout ends interaction"
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
@ -880,16 +806,8 @@ export class InteractionDelegate {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setupMouseWheelInteraction() {
|
setupMouseWheelInteraction() {
|
||||||
this.mouseWheelElement.addEventListener(
|
this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true)
|
||||||
'mousewheel',
|
this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true)
|
||||||
this.onMouseWheel.bind(this),
|
|
||||||
true
|
|
||||||
)
|
|
||||||
this.mouseWheelElement.addEventListener(
|
|
||||||
'DOMMouseScroll',
|
|
||||||
this.onMouseWheel.bind(this),
|
|
||||||
true
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseWheel(event) {
|
onMouseWheel(event) {
|
||||||
@ -953,10 +871,7 @@ export class InteractionDelegate {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
case 'Touch': {
|
case 'Touch': {
|
||||||
let id =
|
let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString()
|
||||||
event.touchType === 'stylus'
|
|
||||||
? 'stylus'
|
|
||||||
: event.identifier.toString()
|
|
||||||
result[id] = this.getPosition(event)
|
result[id] = this.getPosition(event)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
@ -1006,10 +921,7 @@ export class InteractionDelegate {
|
|||||||
let point = extracted[key]
|
let point = extracted[key]
|
||||||
let updated = this.interaction.update(key, point)
|
let updated = this.interaction.update(key, point)
|
||||||
if (updated) {
|
if (updated) {
|
||||||
console.warn(
|
console.warn("new pointer in updateInteraction shouldn't happen", key)
|
||||||
"new pointer in updateInteraction shouldn't happen",
|
|
||||||
key
|
|
||||||
)
|
|
||||||
this.interactionStarted(event, key, point)
|
this.interactionStarted(event, key, point)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1143,11 +1055,7 @@ export class InteractionMapper extends InteractionDelegate {
|
|||||||
onEnd(event) {
|
onEnd(event) {
|
||||||
let extracted = this.extractPoint(event, 'changedTouches')
|
let extracted = this.extractPoint(event, 'changedTouches')
|
||||||
this.endInteraction(event, extracted)
|
this.endInteraction(event, extracted)
|
||||||
let mapped = this.interaction.mapInteraction(
|
let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this))
|
||||||
extracted,
|
|
||||||
['ended'],
|
|
||||||
this.mapPositionToPoint.bind(this)
|
|
||||||
)
|
|
||||||
for (let [target, interaction] of mapped.entries()) {
|
for (let [target, interaction] of mapped.entries()) {
|
||||||
target.onEnd(event, interaction)
|
target.onEnd(event, interaction)
|
||||||
}
|
}
|
||||||
@ -1181,10 +1089,7 @@ export class InteractionMapper extends InteractionDelegate {
|
|||||||
|
|
||||||
// convert to array
|
// convert to array
|
||||||
types = Array.isArray(types) ? types : types.split(/\s/)
|
types = Array.isArray(types) ? types : types.split(/\s/)
|
||||||
if (
|
if (elements instanceof NodeList || elements instanceof HTMLCollection) {
|
||||||
elements instanceof NodeList ||
|
|
||||||
elements instanceof HTMLCollection
|
|
||||||
) {
|
|
||||||
elements = Array.from(elements)
|
elements = Array.from(elements)
|
||||||
}
|
}
|
||||||
elements = Array.isArray(elements) ? elements : [elements]
|
elements = Array.isArray(elements) ? elements : [elements]
|
||||||
@ -1193,9 +1098,7 @@ export class InteractionMapper extends InteractionDelegate {
|
|||||||
const type = types[i].toLowerCase()
|
const type = types[i].toLowerCase()
|
||||||
|
|
||||||
// list of hammer events
|
// list of hammer events
|
||||||
const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(
|
const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type)
|
||||||
type
|
|
||||||
)
|
|
||||||
|
|
||||||
// if it is a hammer event
|
// if it is a hammer event
|
||||||
if (useHammer) {
|
if (useHammer) {
|
||||||
@ -1210,33 +1113,15 @@ export class InteractionMapper extends InteractionDelegate {
|
|||||||
|
|
||||||
// recognizers
|
// recognizers
|
||||||
if (type.startsWith('pan')) {
|
if (type.startsWith('pan')) {
|
||||||
hammer
|
hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
|
||||||
.get('pan')
|
|
||||||
.set(
|
|
||||||
Object.assign(
|
|
||||||
{ direction: Hammer.DIRECTION_ALL },
|
|
||||||
opts
|
|
||||||
)
|
|
||||||
)
|
|
||||||
} else if (type.startsWith('pinch')) {
|
} else if (type.startsWith('pinch')) {
|
||||||
hammer
|
hammer.get('pinch').set(Object.assign({ enable: true }, opts))
|
||||||
.get('pinch')
|
|
||||||
.set(Object.assign({ enable: true }, opts))
|
|
||||||
} else if (type.startsWith('press')) {
|
} else if (type.startsWith('press')) {
|
||||||
hammer.get('press').set(opts)
|
hammer.get('press').set(opts)
|
||||||
} else if (type.startsWith('rotate')) {
|
} else if (type.startsWith('rotate')) {
|
||||||
hammer
|
hammer.get('rotate').set(Object.assign({ enable: true }, opts))
|
||||||
.get('rotate')
|
|
||||||
.set(Object.assign({ enable: true }, opts))
|
|
||||||
} else if (type.startsWith('swipe')) {
|
} else if (type.startsWith('swipe')) {
|
||||||
hammer
|
hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
|
||||||
.get('swipe')
|
|
||||||
.set(
|
|
||||||
Object.assign(
|
|
||||||
{ direction: Hammer.DIRECTION_ALL },
|
|
||||||
opts
|
|
||||||
)
|
|
||||||
)
|
|
||||||
} else if (type.startsWith('tap')) {
|
} else if (type.startsWith('tap')) {
|
||||||
hammer.get('tap').set(opts)
|
hammer.get('tap').set(opts)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -59,11 +59,7 @@ export default class Logging {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static setup({
|
static setup({ log = console.log, warn = console.warn, error = console.error } = {}) {
|
||||||
log = console.log,
|
|
||||||
warn = console.warn,
|
|
||||||
error = console.error
|
|
||||||
} = {}) {
|
|
||||||
logHandlers.log = log
|
logHandlers.log = log
|
||||||
logHandlers.warn = warn
|
logHandlers.warn = warn
|
||||||
logHandlers.error = error
|
logHandlers.error = error
|
||||||
|
|||||||
@ -83,12 +83,10 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
|
|
||||||
if (this.opts.maxWidth) {
|
if (this.opts.maxWidth) {
|
||||||
this.headerStyle.wordWrap = true
|
this.headerStyle.wordWrap = true
|
||||||
this.headerStyle.wordWrapWidth =
|
this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
|
||||||
this.opts.maxWidth - 2 * this.opts.padding
|
|
||||||
|
|
||||||
this.textStyle.wordWrap = true
|
this.textStyle.wordWrap = true
|
||||||
this.textStyle.wordWrapWidth =
|
this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
|
||||||
this.opts.maxWidth - 2 * this.opts.padding
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.alpha = 0
|
this.alpha = 0
|
||||||
@ -131,10 +129,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
if (this.opts.header instanceof PIXI.Text) {
|
if (this.opts.header instanceof PIXI.Text) {
|
||||||
header = this.opts.header
|
header = this.opts.header
|
||||||
} else if (typeof this.opts.header === 'number') {
|
} else if (typeof this.opts.header === 'number') {
|
||||||
header = new PIXI.Text(
|
header = new PIXI.Text(this.opts.header.toString(), this.headerStyle)
|
||||||
this.opts.header.toString(),
|
|
||||||
this.headerStyle
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
header = new PIXI.Text(this.opts.header, this.headerStyle)
|
header = new PIXI.Text(this.opts.header, this.headerStyle)
|
||||||
}
|
}
|
||||||
@ -161,10 +156,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
if (typeof this.opts.content === 'string') {
|
if (typeof this.opts.content === 'string') {
|
||||||
content = new PIXI.Text(this.opts.content, this.textStyle)
|
content = new PIXI.Text(this.opts.content, this.textStyle)
|
||||||
} else if (typeof this.opts.content === 'number') {
|
} else if (typeof this.opts.content === 'number') {
|
||||||
content = new PIXI.Text(
|
content = new PIXI.Text(this.opts.content.toString(), this.textStyle)
|
||||||
this.opts.content.toString(),
|
|
||||||
this.textStyle
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
content = this.opts.content
|
content = this.opts.content
|
||||||
}
|
}
|
||||||
@ -235,31 +227,16 @@ export default class AbstractPopup extends PIXI.Graphics {
|
|||||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||||
*/
|
*/
|
||||||
draw() {
|
draw() {
|
||||||
const square =
|
const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
||||||
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
|
||||||
const diameter = Math.round(this.opts.radius * 2)
|
const diameter = Math.round(this.opts.radius * 2)
|
||||||
|
|
||||||
this.clear()
|
this.clear()
|
||||||
this.lineStyle(
|
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
if (square && diameter === this.wantedWidth) {
|
if (square && diameter === this.wantedWidth) {
|
||||||
this.drawCircle(
|
this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
|
||||||
this.wantedWidth / 2,
|
|
||||||
this.wantedHeight / 2,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.drawRoundedRect(
|
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this.wantedWidth,
|
|
||||||
this.wantedHeight,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
this.endFill()
|
this.endFill()
|
||||||
|
|
||||||
|
|||||||
@ -28,10 +28,7 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
|
|||||||
let dy = 0
|
let dy = 0
|
||||||
let canvas = this.renderer.view
|
let canvas = this.renderer.view
|
||||||
let context = canvas.getContext('webgl')
|
let context = canvas.getContext('webgl')
|
||||||
if (
|
if (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) {
|
||||||
context.drawingBufferWidth < canvas.width ||
|
|
||||||
context.drawingBufferHeight < canvas.height
|
|
||||||
) {
|
|
||||||
extendWidth = context.drawingBufferWidth / canvas.width
|
extendWidth = context.drawingBufferWidth / canvas.width
|
||||||
extendHeight = context.drawingBufferHeight / canvas.height
|
extendHeight = context.drawingBufferHeight / canvas.height
|
||||||
//dx = wantedWidth - context.drawingBufferWidth
|
//dx = wantedWidth - context.drawingBufferWidth
|
||||||
@ -143,10 +140,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
console.log('App is in fullScreen mode or autoResize mode')
|
console.log('App is in fullScreen mode or autoResize mode')
|
||||||
const resizeDebounced = debounce(event => this.resize(event), 50)
|
const resizeDebounced = debounce(event => this.resize(event), 50)
|
||||||
window.addEventListener('resize', resizeDebounced)
|
window.addEventListener('resize', resizeDebounced)
|
||||||
document.body.addEventListener(
|
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
|
||||||
'orientationchange',
|
|
||||||
this.checkOrientation.bind(this)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
if (monkeyPatchMapping) {
|
if (monkeyPatchMapping) {
|
||||||
console.log('Using monkey patched coordinate mapping')
|
console.log('Using monkey patched coordinate mapping')
|
||||||
@ -177,18 +171,12 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
uri: '/graphql'
|
uri: '/graphql'
|
||||||
})
|
})
|
||||||
|
|
||||||
const wsClient = new subscriptions.SubscriptionClient(
|
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
|
||||||
`wss://${location.hostname}/subscriptions`,
|
|
||||||
{
|
|
||||||
reconnect: true,
|
reconnect: true,
|
||||||
connectionParams: {}
|
connectionParams: {}
|
||||||
}
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
|
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
|
||||||
networkInterface,
|
|
||||||
wsClient
|
|
||||||
)
|
|
||||||
|
|
||||||
this.apolloClient = new apollo.ApolloClient({
|
this.apolloClient = new apollo.ApolloClient({
|
||||||
networkInterface: networkInterfaceWithSubscriptions
|
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.
|
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
|
||||||
* @return {PIXIApp} - Returns the PIXIApp for chaining.
|
* @return {PIXIApp} - Returns the PIXIApp for chaining.
|
||||||
*/
|
*/
|
||||||
resize(
|
resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
|
||||||
event,
|
|
||||||
{ width = window.innerWidth, height = window.innerHeight } = {}
|
|
||||||
) {
|
|
||||||
this.width = width
|
this.width = width
|
||||||
this.height = height
|
this.height = height
|
||||||
this.expandRenderer()
|
this.expandRenderer()
|
||||||
@ -348,8 +333,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
monkeyPatchPixiMapping() {
|
monkeyPatchPixiMapping() {
|
||||||
if (this.originalMapPositionToPoint === null) {
|
if (this.originalMapPositionToPoint === null) {
|
||||||
let interactionManager = this.renderer.plugins.interaction
|
let interactionManager = this.renderer.plugins.interaction
|
||||||
this.originalMapPositionToPoint =
|
this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
|
||||||
interactionManager.mapPositionToPoint
|
|
||||||
interactionManager.mapPositionToPoint = (point, x, y) => {
|
interactionManager.mapPositionToPoint = (point, x, y) => {
|
||||||
return this.fixedMapPositionToPoint(point, x, y)
|
return this.fixedMapPositionToPoint(point, x, y)
|
||||||
}
|
}
|
||||||
@ -378,8 +362,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
|
|
||||||
if (
|
if (
|
||||||
context !== null &&
|
context !== null &&
|
||||||
(context.drawingBufferWidth < canvas.width ||
|
(context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height)
|
||||||
context.drawingBufferHeight < canvas.height)
|
|
||||||
) {
|
) {
|
||||||
extendWidth = context.drawingBufferWidth / canvas.width
|
extendWidth = context.drawingBufferWidth / canvas.width
|
||||||
extendHeight = context.drawingBufferHeight / canvas.height
|
extendHeight = context.drawingBufferHeight / canvas.height
|
||||||
@ -388,12 +371,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
}
|
}
|
||||||
x *= extendWidth
|
x *= extendWidth
|
||||||
y *= extendHeight
|
y *= extendHeight
|
||||||
return this.originalMapPositionToPoint.call(
|
return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
|
||||||
interactionManager,
|
|
||||||
local,
|
|
||||||
x,
|
|
||||||
y + dy
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -444,9 +422,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
* @return {Modal} Returns the Modal object.
|
* @return {Modal} Returns the Modal object.
|
||||||
*/
|
*/
|
||||||
modal(opts = {}) {
|
modal(opts = {}) {
|
||||||
let modal = new Modal(
|
let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
|
||||||
Object.assign({ theme: this.theme }, opts, { app: this })
|
|
||||||
)
|
|
||||||
this.scene.addChild(modal)
|
this.scene.addChild(modal)
|
||||||
|
|
||||||
return modal
|
return modal
|
||||||
@ -459,9 +435,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
* @return {Message} Returns the Message object.
|
* @return {Message} Returns the Message object.
|
||||||
*/
|
*/
|
||||||
message(opts = {}) {
|
message(opts = {}) {
|
||||||
let message = new Message(
|
let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
|
||||||
Object.assign({ theme: this.theme }, opts, { app: this })
|
|
||||||
)
|
|
||||||
this.scene.addChild(message)
|
this.scene.addChild(message)
|
||||||
|
|
||||||
return message
|
return message
|
||||||
@ -480,11 +454,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
|
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
|
||||||
* @return {PIXIApp} The PIXIApp object for chaining.
|
* @return {PIXIApp} The PIXIApp object for chaining.
|
||||||
*/
|
*/
|
||||||
loadSprites(
|
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
|
||||||
resources,
|
|
||||||
loaded = null,
|
|
||||||
{ resolutionDependent = true, progress = false } = {}
|
|
||||||
) {
|
|
||||||
this.loadTextures(
|
this.loadTextures(
|
||||||
resources,
|
resources,
|
||||||
textures => {
|
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?
|
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
|
||||||
* @return {PIXIApp} The PIXIApp object for chaining.
|
* @return {PIXIApp} The PIXIApp object for chaining.
|
||||||
*/
|
*/
|
||||||
loadTextures(
|
loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
|
||||||
resources,
|
|
||||||
loaded = null,
|
|
||||||
{ resolutionDependent = true, progress = false } = {}
|
|
||||||
) {
|
|
||||||
if (!Array.isArray(resources)) {
|
if (!Array.isArray(resources)) {
|
||||||
resources = [resources]
|
resources = [resources]
|
||||||
}
|
}
|
||||||
@ -534,16 +500,10 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
let resolution = Math.round(this.renderer.resolution)
|
let resolution = Math.round(this.renderer.resolution)
|
||||||
switch (resolution) {
|
switch (resolution) {
|
||||||
case 2:
|
case 2:
|
||||||
loader.add(
|
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
|
||||||
resource,
|
|
||||||
resource.replace(/\.([^.]*)$/, '@2x.$1')
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
case 3:
|
case 3:
|
||||||
loader.add(
|
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
|
||||||
resource,
|
|
||||||
resource.replace(/\.([^.]*)$/, '@3x.$1')
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
loader.add(resource)
|
loader.add(resource)
|
||||||
@ -708,11 +668,7 @@ export default class PIXIApp extends PIXI.Application {
|
|||||||
pixiGlobal.x *= resolution
|
pixiGlobal.x *= resolution
|
||||||
pixiGlobal.y *= resolution
|
pixiGlobal.y *= resolution
|
||||||
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
|
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
|
||||||
return window.convertPointFromNodeToPage(
|
return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
|
||||||
app.view,
|
|
||||||
pixiGlobal.x,
|
|
||||||
pixiGlobal.y
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -87,11 +87,7 @@ export default class Badge extends AbstractPopup {
|
|||||||
content: this.opts.tooltip
|
content: this.opts.tooltip
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip = Object.assign(
|
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||||
{},
|
|
||||||
{ object: this },
|
|
||||||
this.opts.tooltip
|
|
||||||
)
|
|
||||||
this.tooltip = new Tooltip(this.opts.tooltip)
|
this.tooltip = new Tooltip(this.opts.tooltip)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -108,12 +104,8 @@ export default class Badge extends AbstractPopup {
|
|||||||
layout() {
|
layout() {
|
||||||
super.layout()
|
super.layout()
|
||||||
|
|
||||||
this.content.x =
|
this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
|
||||||
this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
|
this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
|
||||||
this.content.y =
|
|
||||||
this.height / 2 -
|
|
||||||
this.content.height / 2 -
|
|
||||||
this.opts.strokeWidth / 2
|
|
||||||
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|||||||
@ -68,9 +68,7 @@ export default class BlurFilter extends PIXI.Filter {
|
|||||||
return this.tiltShiftXFilter.shape
|
return this.tiltShiftXFilter.shape
|
||||||
}
|
}
|
||||||
set shape(value) {
|
set shape(value) {
|
||||||
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
|
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value)
|
||||||
value
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -189,12 +187,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||||||
this.uniforms.circle = [shape.x, shape.y, shape.r]
|
this.uniforms.circle = [shape.x, shape.y, shape.r]
|
||||||
} else {
|
} else {
|
||||||
this.uniforms.shape = 2
|
this.uniforms.shape = 2
|
||||||
this.uniforms.rectangle = [
|
this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height]
|
||||||
shape.x,
|
|
||||||
shape.y,
|
|
||||||
shape.x + shape.width,
|
|
||||||
shape.y + shape.height
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
this.uniforms.blur = blur
|
this.uniforms.blur = blur
|
||||||
this.uniforms.delta = new PIXI.Point(0, 0)
|
this.uniforms.delta = new PIXI.Point(0, 0)
|
||||||
@ -228,12 +221,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||||||
return new PIXI.Circle(circle[0], circle[1], circle[2])
|
return new PIXI.Circle(circle[0], circle[1], circle[2])
|
||||||
} else {
|
} else {
|
||||||
const rectangle = this.uniforms.rectangle
|
const rectangle = this.uniforms.rectangle
|
||||||
return new PIXI.Rectangle(
|
return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
|
||||||
rectangle[0],
|
|
||||||
rectangle[1],
|
|
||||||
rectangle[2],
|
|
||||||
rectangle[3]
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
set shape(value) {
|
set shape(value) {
|
||||||
@ -242,12 +230,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
|||||||
this.uniforms.circle = [value.x, value.y, value.r]
|
this.uniforms.circle = [value.x, value.y, value.r]
|
||||||
} else {
|
} else {
|
||||||
this.uniforms.shape = 2
|
this.uniforms.shape = 2
|
||||||
this.uniforms.rectangle = [
|
this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height]
|
||||||
value.x,
|
|
||||||
value.y,
|
|
||||||
value.x + value.width,
|
|
||||||
value.y + value.height
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -32,13 +32,13 @@
|
|||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 420,
|
height: 600,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
}).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',
|
theme: 'red',
|
||||||
x: 60,
|
x: 60,
|
||||||
y: 10,
|
y: 10,
|
||||||
@ -49,7 +49,7 @@ let button2 = new Button({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button3 = new Button({
|
const button3 = new Button({
|
||||||
x: 150,
|
x: 150,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Checkbox button',
|
label: 'Checkbox button',
|
||||||
@ -59,7 +59,7 @@ let button3 = new Button({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button4 = new Button({
|
const button4 = new Button({
|
||||||
x: 330,
|
x: 330,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Disabled button',
|
label: 'Disabled button',
|
||||||
@ -69,14 +69,14 @@ let button4 = new Button({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button5 = new Button({
|
const button5 = new Button({
|
||||||
x: 500,
|
x: 500,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Active button',
|
label: 'Active button',
|
||||||
active: true
|
active: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let button6 = new Button({
|
const button6 = new Button({
|
||||||
x: 650,
|
x: 650,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Active disabled button',
|
label: 'Active disabled button',
|
||||||
@ -85,7 +85,7 @@ let button6 = new Button({
|
|||||||
disabled: true
|
disabled: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let button7 = new Button({
|
const button7 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 70,
|
y: 70,
|
||||||
label: 'Icon button',
|
label: 'Icon button',
|
||||||
@ -94,7 +94,7 @@ let button7 = new Button({
|
|||||||
icon: 'arrow_back'
|
icon: 'arrow_back'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button8 = new Button({
|
const button8 = new Button({
|
||||||
x: 180,
|
x: 180,
|
||||||
y: 70,
|
y: 70,
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
@ -104,7 +104,7 @@ let button8 = new Button({
|
|||||||
iconPosition: 'right'
|
iconPosition: 'right'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button9 = new Button({
|
const button9 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 130,
|
y: 130,
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
@ -112,7 +112,7 @@ let button9 = new Button({
|
|||||||
iconActive: 'pause'
|
iconActive: 'pause'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button10 = new Button({
|
const button10 = new Button({
|
||||||
x: 60,
|
x: 60,
|
||||||
y: 130,
|
y: 130,
|
||||||
icon: 'stop',
|
icon: 'stop',
|
||||||
@ -121,14 +121,14 @@ let button10 = new Button({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button11 = new Button({
|
const button11 = new Button({
|
||||||
x: 110,
|
x: 110,
|
||||||
y: 130,
|
y: 130,
|
||||||
icon: 'star_border',
|
icon: 'star_border',
|
||||||
tooltip: 'Bookmark'
|
tooltip: 'Bookmark'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button12 = new Button({
|
const button12 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 190,
|
y: 190,
|
||||||
icon: 'airplay',
|
icon: 'airplay',
|
||||||
@ -141,7 +141,7 @@ let button12 = new Button({
|
|||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button13 = new Button({
|
const button13 = new Button({
|
||||||
x: 50,
|
x: 50,
|
||||||
y: 190,
|
y: 190,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -169,7 +169,7 @@ let button13 = new Button({
|
|||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button14 = new Button({
|
const button14 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -178,7 +178,7 @@ let button14 = new Button({
|
|||||||
iconActive: 'add_circle'
|
iconActive: 'add_circle'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button15 = new Button({
|
const button15 = new Button({
|
||||||
x: 200,
|
x: 200,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -187,7 +187,7 @@ let button15 = new Button({
|
|||||||
iconActive: null
|
iconActive: null
|
||||||
})
|
})
|
||||||
|
|
||||||
let button16 = new Button({
|
const button16 = new Button({
|
||||||
x: 400,
|
x: 400,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -197,7 +197,7 @@ let button16 = new Button({
|
|||||||
active: true
|
active: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let button17 = new Button({
|
const button17 = new Button({
|
||||||
x: 600,
|
x: 600,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -215,7 +215,7 @@ let graphic2 = new PIXI.Graphics()
|
|||||||
graphic2.beginFill(0x40c3f2)
|
graphic2.beginFill(0x40c3f2)
|
||||||
graphic2.drawCircle(30, 30, 30)
|
graphic2.drawCircle(30, 30, 30)
|
||||||
|
|
||||||
let button18 = new Button({
|
const button18 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 310,
|
y: 310,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -232,7 +232,7 @@ let graphic4 = new PIXI.Graphics()
|
|||||||
graphic4.beginFill(0xf8ce2d)
|
graphic4.beginFill(0xf8ce2d)
|
||||||
graphic4.drawCircle(40, 40, 40)
|
graphic4.drawCircle(40, 40, 40)
|
||||||
|
|
||||||
let button19 = new Button({
|
const button19 = new Button({
|
||||||
x: 200,
|
x: 200,
|
||||||
y: 310,
|
y: 310,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -243,7 +243,7 @@ let button19 = new Button({
|
|||||||
iconPosition: 'right'
|
iconPosition: 'right'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button20 = new Button({
|
const button20 = new Button({
|
||||||
x: 400,
|
x: 400,
|
||||||
y: 310,
|
y: 310,
|
||||||
label: 'Link Button',
|
label: 'Link Button',
|
||||||
@ -251,7 +251,7 @@ let button20 = new Button({
|
|||||||
style: 'link'
|
style: 'link'
|
||||||
})
|
})
|
||||||
|
|
||||||
let button21 = new Button({
|
const button21 = new Button({
|
||||||
x: 600,
|
x: 600,
|
||||||
y: 310,
|
y: 310,
|
||||||
minWidth: 70,
|
minWidth: 70,
|
||||||
@ -261,11 +261,73 @@ let button21 = new Button({
|
|||||||
style: 'link'
|
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(button1, button2, button3, button4, button5, button6)
|
||||||
app.scene.addChild(button7, button8)
|
app.scene.addChild(button7, button8)
|
||||||
app.scene.addChild(button9, button10, button11)
|
app.scene.addChild(button9, button10, button11)
|
||||||
app.scene.addChild(button12, button13)
|
app.scene.addChild(button12, button13)
|
||||||
app.scene.addChild(button14, button15, button16, button17)
|
app.scene.addChild(button14, button15, button16, button17)
|
||||||
app.scene.addChild(button18, button19, button20, button21)
|
app.scene.addChild(button18, button19, button20, button21)
|
||||||
|
app.scene.addChild(button22, button23, button24, button25)
|
||||||
|
app.scene.addChild(button26)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,8 +1,9 @@
|
|||||||
/* global PIXI TweenLite */
|
/* global */
|
||||||
import Theme from './theme.js'
|
import Theme from './theme.js'
|
||||||
import Tooltip from './tooltip.js'
|
import Tooltip from './tooltip.js'
|
||||||
import Badge from './badge.js'
|
import Badge from './badge.js'
|
||||||
import Events from '../events.js'
|
import Events from '../events.js'
|
||||||
|
import { Points } from '../utils.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Callback for the button action.
|
* Callback for the button action.
|
||||||
@ -135,8 +136,8 @@ export default class Button extends PIXI.Container {
|
|||||||
strokeActive: theme.strokeActive,
|
strokeActive: theme.strokeActive,
|
||||||
strokeActiveWidth: theme.strokeActiveWidth,
|
strokeActiveWidth: theme.strokeActiveWidth,
|
||||||
strokeActiveAlpha: theme.strokeActiveAlpha,
|
strokeActiveAlpha: theme.strokeActiveAlpha,
|
||||||
textStyle: theme.textStyle,
|
textStyle: {},
|
||||||
textStyleActive: theme.textStyleActive,
|
textStyleActive: {},
|
||||||
style: 'default',
|
style: 'default',
|
||||||
radius: theme.radius,
|
radius: theme.radius,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
@ -156,15 +157,12 @@ export default class Button extends PIXI.Container {
|
|||||||
|
|
||||||
this.id = this.opts.id
|
this.id = this.opts.id
|
||||||
|
|
||||||
if (
|
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
|
||||||
typeof this.opts.icon === 'undefined' &&
|
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
|
||||||
typeof this.opts.iconActive !== 'undefined'
|
|
||||||
) {
|
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
|
||||||
this.opts.icon = this.opts.iconActive
|
this.opts.icon = this.opts.iconActive
|
||||||
} else if (
|
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
|
||||||
typeof this.opts.icon !== 'undefined' &&
|
|
||||||
typeof this.opts.iconActive === 'undefined'
|
|
||||||
) {
|
|
||||||
this.opts.iconActive = this.opts.icon
|
this.opts.iconActive = this.opts.icon
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -180,6 +178,8 @@ export default class Button extends PIXI.Container {
|
|||||||
this._active = null
|
this._active = null
|
||||||
this._disabled = null
|
this._disabled = null
|
||||||
|
|
||||||
|
this.__start = { x: null, y: null }
|
||||||
|
|
||||||
this.iconInactive = null
|
this.iconInactive = null
|
||||||
this.iconActive = null
|
this.iconActive = null
|
||||||
this.text = null
|
this.text = null
|
||||||
@ -234,17 +234,11 @@ export default class Button extends PIXI.Container {
|
|||||||
// Icon
|
// Icon
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.icon) {
|
if (this.opts.icon) {
|
||||||
this.iconInactive = this.loadIcon(
|
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
|
||||||
this.opts.icon,
|
|
||||||
this.opts.iconColor
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.opts.iconActive) {
|
if (this.opts.iconActive) {
|
||||||
this.iconActive = this.loadIcon(
|
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
|
||||||
this.opts.iconActive,
|
|
||||||
this.opts.iconColorActive
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
@ -261,17 +255,17 @@ export default class Button extends PIXI.Container {
|
|||||||
this.capture(e)
|
this.capture(e)
|
||||||
})
|
})
|
||||||
|
|
||||||
this.button.on('pointerout', e => {
|
this.button.on('pointerout', this.onEnd.bind(this))
|
||||||
this.capture(e)
|
this.button.on('pointercancel', this.onEnd.bind(this))
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
this.button.on('pointerupoutside', this.onEnd.bind(this))
|
||||||
alpha: 1,
|
this.button.on('pointertap', this.onEnd.bind(this))
|
||||||
overwrite: 'none'
|
this.button.on('scroll', this.onEnd.bind(this))
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
this.button.on('pointerdown', e => {
|
this.button.on('pointerdown', e => {
|
||||||
//this.capture(e)
|
//this.capture(e)
|
||||||
|
this.__start.x = e.data.global.x
|
||||||
|
this.__start.y = e.data.global.y
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.7,
|
alpha: 0.7,
|
||||||
overwrite: 'none'
|
overwrite: 'none'
|
||||||
@ -280,6 +274,10 @@ export default class Button extends PIXI.Container {
|
|||||||
|
|
||||||
this.button.on('pointerup', e => {
|
this.button.on('pointerup', e => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
|
|
||||||
|
const distance = Points.distance(e.data.global, this.__start)
|
||||||
|
|
||||||
|
if (distance < 5) {
|
||||||
if (this.opts.beforeAction) {
|
if (this.opts.beforeAction) {
|
||||||
this.opts.beforeAction.call(this, e, this)
|
this.opts.beforeAction.call(this, e, this)
|
||||||
}
|
}
|
||||||
@ -300,6 +298,7 @@ export default class Button extends PIXI.Container {
|
|||||||
if (this.opts.afterAction) {
|
if (this.opts.afterAction) {
|
||||||
this.opts.afterAction.call(this, e, this)
|
this.opts.afterAction.call(this, e, this)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// disabled
|
// disabled
|
||||||
@ -319,11 +318,7 @@ export default class Button extends PIXI.Container {
|
|||||||
content: this.opts.tooltip
|
content: this.opts.tooltip
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip = Object.assign(
|
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||||
{},
|
|
||||||
{ object: this },
|
|
||||||
this.opts.tooltip
|
|
||||||
)
|
|
||||||
this.tooltip = new Tooltip(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)
|
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.addChild(badge)
|
||||||
|
|
||||||
this.badge = badge
|
this.badge = badge
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.layout()
|
||||||
|
|
||||||
// set position
|
// set position
|
||||||
//-----------------
|
//-----------------
|
||||||
this.position.set(this.opts.x, this.opts.y)
|
this.position.set(this.opts.x, this.opts.y)
|
||||||
@ -469,6 +432,39 @@ export default class Button extends PIXI.Container {
|
|||||||
|
|
||||||
this.icon = icon
|
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
|
// draw
|
||||||
//-----------------
|
//-----------------
|
||||||
this.draw()
|
this.draw()
|
||||||
@ -516,8 +512,7 @@ export default class Button extends PIXI.Container {
|
|||||||
this.content.x = (this._width - this.content.width) / 2
|
this.content.x = (this._width - this.content.width) / 2
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
this.content.x =
|
this.content.x = this._width - this.opts.padding - this.content.width
|
||||||
this._width - this.opts.padding - this.content.width
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -529,8 +524,7 @@ export default class Button extends PIXI.Container {
|
|||||||
this.content.y = (this._height - this.content.height) / 2
|
this.content.y = (this._height - this.content.height) / 2
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
this.content.y =
|
this.content.y = this._height - this.opts.padding - this.content.height
|
||||||
this._height - this.opts.padding - this.content.height
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -546,30 +540,13 @@ export default class Button extends PIXI.Container {
|
|||||||
draw() {
|
draw() {
|
||||||
this.button.clear()
|
this.button.clear()
|
||||||
if (this.active) {
|
if (this.active) {
|
||||||
this.button.lineStyle(
|
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||||
this.opts.strokeActiveWidth,
|
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||||
this.opts.strokeActive,
|
|
||||||
this.opts.strokeActiveAlpha
|
|
||||||
)
|
|
||||||
this.button.beginFill(
|
|
||||||
this.opts.fillActive,
|
|
||||||
this.opts.fillActiveAlpha
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.button.lineStyle(
|
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
}
|
}
|
||||||
this.button.drawRoundedRect(
|
this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this._width,
|
|
||||||
this._height,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
this.button.endFill()
|
this.button.endFill()
|
||||||
|
|
||||||
return this
|
return this
|
||||||
@ -686,9 +663,7 @@ export default class Button extends PIXI.Container {
|
|||||||
size = this.opts.minHeight - 2 * this.opts.padding
|
size = this.opts.minHeight - 2 * this.opts.padding
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = Button.iconIsUrl(icon)
|
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
|
||||||
? icon
|
|
||||||
: `../../assets/icons/${icon}.png`
|
|
||||||
const iconTexture = PIXI.Texture.fromImage(url, true)
|
const iconTexture = PIXI.Texture.fromImage(url, true)
|
||||||
|
|
||||||
const sprite = new PIXI.Sprite(iconTexture)
|
const sprite = new PIXI.Sprite(iconTexture)
|
||||||
@ -728,4 +703,12 @@ export default class Button extends PIXI.Container {
|
|||||||
this.icon.tint = value
|
this.icon.tint = value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onEnd(event) {
|
||||||
|
this.capture(event)
|
||||||
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
|
alpha: 1,
|
||||||
|
overwrite: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.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.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
@ -29,10 +30,10 @@
|
|||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 1000,
|
width: 1000,
|
||||||
height: 1000
|
height: 1700
|
||||||
}).setup().run()
|
}).setup().run()
|
||||||
|
|
||||||
let buttonGroup1 = new ButtonGroup({
|
const buttonGroup1 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 10,
|
y: 10,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -43,7 +44,7 @@ let buttonGroup1 = new ButtonGroup({
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup2 = new ButtonGroup({
|
const buttonGroup2 = new ButtonGroup({
|
||||||
x: 260,
|
x: 260,
|
||||||
y: 10,
|
y: 10,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -60,7 +61,7 @@ let buttonGroup2 = new ButtonGroup({
|
|||||||
strokeWidth: 3
|
strokeWidth: 3
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup3 = new ButtonGroup({
|
const buttonGroup3 = new ButtonGroup({
|
||||||
x: 610,
|
x: 610,
|
||||||
y: 10,
|
y: 10,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -74,7 +75,7 @@ let buttonGroup3 = new ButtonGroup({
|
|||||||
strokeWidth: 1
|
strokeWidth: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup4 = new ButtonGroup({
|
const buttonGroup4 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 90,
|
y: 90,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -93,20 +94,21 @@ let buttonGroup4 = new ButtonGroup({
|
|||||||
strokeWidth: 1
|
strokeWidth: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup5 = new ButtonGroup({
|
const buttonGroup5 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 180,
|
y: 180,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'ButtonGroup'},
|
{label: 'ButtonGroup'},
|
||||||
{label: 'of', active: true},
|
{label: 'of', active: true},
|
||||||
{label: 'type'},
|
{label: 'type'},
|
||||||
|
{minWidth: 30, style: 'link'},
|
||||||
{label: 'checkbox', active: true}
|
{label: 'checkbox', active: true}
|
||||||
],
|
],
|
||||||
margin: 6,
|
margin: 6,
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup6 = new ButtonGroup({
|
const buttonGroup6 = new ButtonGroup({
|
||||||
x: 450,
|
x: 450,
|
||||||
y: 180,
|
y: 180,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -119,7 +121,7 @@ let buttonGroup6 = new ButtonGroup({
|
|||||||
type: 'radio'
|
type: 'radio'
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup7 = new ButtonGroup({
|
const buttonGroup7 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 250,
|
y: 250,
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
@ -134,7 +136,7 @@ let buttonGroup7 = new ButtonGroup({
|
|||||||
style: 'link'
|
style: 'link'
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup8 = new ButtonGroup({
|
const buttonGroup8 = new ButtonGroup({
|
||||||
x: 610,
|
x: 610,
|
||||||
y: 250,
|
y: 250,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -147,7 +149,7 @@ let buttonGroup8 = new ButtonGroup({
|
|||||||
margin: 0
|
margin: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup9 = new ButtonGroup({
|
const buttonGroup9 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -160,7 +162,7 @@ let buttonGroup9 = new ButtonGroup({
|
|||||||
minWidth: 70
|
minWidth: 70
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup10 = new ButtonGroup({
|
const buttonGroup10 = new ButtonGroup({
|
||||||
x: 100,
|
x: 100,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -176,7 +178,7 @@ let buttonGroup10 = new ButtonGroup({
|
|||||||
margin: 0
|
margin: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup11 = new ButtonGroup({
|
const buttonGroup11 = new ButtonGroup({
|
||||||
x: 250,
|
x: 250,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -197,7 +199,7 @@ let buttonGroup11 = new ButtonGroup({
|
|||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup12 = new ButtonGroup({
|
const buttonGroup12 = new ButtonGroup({
|
||||||
x: 400,
|
x: 400,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -212,7 +214,7 @@ let buttonGroup12 = new ButtonGroup({
|
|||||||
type: 'radio'
|
type: 'radio'
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroup13 = new ButtonGroup({
|
const buttonGroup13 = new ButtonGroup({
|
||||||
x: 520,
|
x: 520,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
@ -231,10 +233,118 @@ let buttonGroup13 = new ButtonGroup({
|
|||||||
minHeight: 100
|
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(buttonGroup1, buttonGroup2, buttonGroup3)
|
||||||
app.scene.addChild(buttonGroup4)
|
app.scene.addChild(buttonGroup4)
|
||||||
app.scene.addChild(buttonGroup5, buttonGroup6)
|
app.scene.addChild(buttonGroup5, buttonGroup6)
|
||||||
app.scene.addChild(buttonGroup7, buttonGroup8)
|
app.scene.addChild(buttonGroup7, buttonGroup8)
|
||||||
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
|
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
|
||||||
|
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
|
/* globals ThrowPropsPlugin, Strong */
|
||||||
|
|
||||||
import Theme from './theme.js'
|
import Theme from './theme.js'
|
||||||
import Button from './button.js'
|
import Button from './button.js'
|
||||||
|
import Events from '../events.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class that represents a PixiJS ButtonGroup.
|
* 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 http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
|
||||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
|
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
|
||||||
*/
|
*/
|
||||||
export default class ButtonGroup extends PIXI.Graphics {
|
export default class ButtonGroup extends PIXI.Container {
|
||||||
/**
|
/**
|
||||||
* Creates an instance of a ButtonGroup.
|
* Creates an instance of a ButtonGroup.
|
||||||
*
|
*
|
||||||
@ -39,6 +42,10 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
* or a Theme object.
|
* or a Theme object.
|
||||||
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
|
* @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.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.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 {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.
|
* @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: [],
|
buttons: [],
|
||||||
minWidth: 44,
|
minWidth: 44,
|
||||||
minHeight: 44,
|
minHeight: 44,
|
||||||
|
maxWidth: null,
|
||||||
|
maxHeight: null,
|
||||||
|
stackPadding: 10,
|
||||||
|
app: window.app,
|
||||||
padding: theme.padding,
|
padding: theme.padding,
|
||||||
margin: theme.margin,
|
margin: theme.margin,
|
||||||
iconPosition: 'left', // left, right
|
iconPosition: 'left', // left, right
|
||||||
@ -102,8 +113,8 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
strokeActive: theme.strokeActive,
|
strokeActive: theme.strokeActive,
|
||||||
strokeActiveWidth: theme.strokeActiveWidth,
|
strokeActiveWidth: theme.strokeActiveWidth,
|
||||||
strokeActiveAlpha: theme.strokeActiveAlpha,
|
strokeActiveAlpha: theme.strokeActiveAlpha,
|
||||||
textStyle: theme.textStyle,
|
textStyle: {},
|
||||||
textStyleActive: theme.textStyleActive,
|
textStyleActive: {},
|
||||||
style: 'default',
|
style: 'default',
|
||||||
radius: theme.radius,
|
radius: theme.radius,
|
||||||
disabled: null,
|
disabled: null,
|
||||||
@ -116,9 +127,13 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
|
||||||
|
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
|
||||||
|
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
|
||||||
|
|
||||||
this.buttons = []
|
this.buttons = []
|
||||||
|
|
||||||
this._disabled = null
|
this._disabled = null
|
||||||
|
this.__dragging = false
|
||||||
|
|
||||||
this.visible = this.opts.visible
|
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.
|
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||||
*/
|
*/
|
||||||
setup() {
|
setup() {
|
||||||
|
// inner container
|
||||||
|
//--------------------
|
||||||
|
const container = new PIXI.Graphics()
|
||||||
|
this.addChild(container)
|
||||||
|
this.container = container
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
//-----------------
|
//-----------------
|
||||||
let position = 0
|
let position = 0
|
||||||
|
let index = 0
|
||||||
|
|
||||||
for (let it of this.opts.buttons) {
|
for (let it of this.opts.buttons) {
|
||||||
delete it.x
|
delete it.x
|
||||||
@ -164,19 +186,11 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
it.fillActive = it.fillActive || this.opts.fillActive
|
it.fillActive = it.fillActive || this.opts.fillActive
|
||||||
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
|
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
|
||||||
it.stroke = it.stroke || this.opts.stroke
|
it.stroke = it.stroke || this.opts.stroke
|
||||||
it.strokeWidth =
|
it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
|
||||||
it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
|
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
|
||||||
it.strokeAlpha =
|
|
||||||
it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
|
|
||||||
it.strokeActive = it.strokeActive || this.opts.strokeActive
|
it.strokeActive = it.strokeActive || this.opts.strokeActive
|
||||||
it.strokeActiveWidth =
|
it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
|
||||||
it.strokeActiveWidth != null
|
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
|
||||||
? it.strokeActiveWidth
|
|
||||||
: this.opts.strokeActiveWidth
|
|
||||||
it.strokeActiveAlpha =
|
|
||||||
it.strokeActiveAlpha != null
|
|
||||||
? it.strokeActiveAlpha
|
|
||||||
: this.opts.strokeActiveAlpha
|
|
||||||
it.textStyle = it.textStyle || this.opts.textStyle
|
it.textStyle = it.textStyle || this.opts.textStyle
|
||||||
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
|
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
|
||||||
it.style = it.style || this.opts.style
|
it.style = it.style || this.opts.style
|
||||||
@ -195,10 +209,7 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
it.align = it.align || this.opts.align
|
it.align = it.align || this.opts.align
|
||||||
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
|
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
|
||||||
it.afterAction = (event, button) => {
|
it.afterAction = (event, button) => {
|
||||||
if (
|
if (this.opts.type === 'radio' && button.opts.type === 'default') {
|
||||||
this.opts.type === 'radio' &&
|
|
||||||
button.opts.type === 'default'
|
|
||||||
) {
|
|
||||||
this.buttons.forEach(it => {
|
this.buttons.forEach(it => {
|
||||||
if (it.opts.type === 'default') {
|
if (it.opts.type === 'default') {
|
||||||
it.active = false
|
it.active = false
|
||||||
@ -215,23 +226,24 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
if (typeof it.tooltip === 'string') {
|
if (typeof it.tooltip === 'string') {
|
||||||
it.tooltip = { content: it.tooltip, container: this }
|
it.tooltip = { content: it.tooltip, container: this }
|
||||||
} else {
|
} else {
|
||||||
it.tooltip = Object.assign(
|
it.tooltip = Object.assign({}, { container: this }, it.tooltip)
|
||||||
{},
|
|
||||||
{ container: this },
|
|
||||||
it.tooltip
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let button = new Button(it)
|
let button = new Button(it)
|
||||||
|
|
||||||
this.addChild(button)
|
this.container.addChild(button)
|
||||||
this.buttons.push(button)
|
this.buttons.push(button)
|
||||||
|
|
||||||
position +=
|
button.__originalPosition = {
|
||||||
(this.opts.orientation === 'horizontal'
|
x: button.x,
|
||||||
? button.width
|
y: button.y
|
||||||
: button.height) + this.opts.margin
|
}
|
||||||
|
|
||||||
|
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
|
||||||
|
|
||||||
|
button.__initIndex = index
|
||||||
|
index++
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.opts.orientation === 'vertical') {
|
if (this.opts.orientation === 'vertical') {
|
||||||
@ -249,6 +261,43 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
this.disabled = this.opts.disabled
|
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
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -266,6 +315,12 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
//-----------------
|
//-----------------
|
||||||
this.draw()
|
this.draw()
|
||||||
|
|
||||||
|
// stack
|
||||||
|
//-----------------
|
||||||
|
if (this.opts.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
|
||||||
|
this.stack()
|
||||||
|
}
|
||||||
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -279,41 +334,27 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
if (this.opts.margin === 0) {
|
if (this.opts.margin === 0) {
|
||||||
this.buttons.forEach(it => it.hide())
|
this.buttons.forEach(it => it.hide())
|
||||||
|
|
||||||
this.clear()
|
this.container.clear()
|
||||||
this.lineStyle(
|
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
this.opts.stroke,
|
this.container.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
|
||||||
this.drawRoundedRect(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this.width,
|
|
||||||
this.height,
|
|
||||||
this.opts.radius
|
|
||||||
)
|
|
||||||
|
|
||||||
// Draw borders
|
// Draw borders
|
||||||
this.lineStyle(
|
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha / 2
|
|
||||||
)
|
|
||||||
|
|
||||||
this.buttons.forEach((it, i) => {
|
this.buttons.forEach((it, i) => {
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
this.moveTo(it.x, it.y)
|
this.container.moveTo(it.x, it.y)
|
||||||
|
|
||||||
if (this.opts.orientation === 'horizontal') {
|
if (this.opts.orientation === 'horizontal') {
|
||||||
this.lineTo(it.x, it.height)
|
this.container.lineTo(it.x, it.height)
|
||||||
} else {
|
} else {
|
||||||
this.lineTo(it.width, it.y)
|
this.container.lineTo(it.width, it.y)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this.endFill()
|
this.container.endFill()
|
||||||
}
|
}
|
||||||
|
|
||||||
return this
|
return this
|
||||||
@ -334,6 +375,34 @@ export default class ButtonGroup extends PIXI.Graphics {
|
|||||||
this.buttons.forEach(it => (it.disabled = value))
|
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.
|
* 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
|
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))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,8 +40,7 @@ export class DeepZoomInfo {
|
|||||||
// number in the file system for the folder with tiles
|
// number in the file system for the folder with tiles
|
||||||
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
|
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
|
||||||
this.type = this.type || 'dzi'
|
this.type = this.type || 'dzi'
|
||||||
this.urlTileTemplate =
|
this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
|
||||||
this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
|
|
||||||
this.setupDimensions()
|
this.setupDimensions()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -231,15 +230,7 @@ export class DeepZoomInfo {
|
|||||||
test() {
|
test() {
|
||||||
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
|
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
|
||||||
for (let i = 0; i <= this.maxLevel; i++) {
|
for (let i = 0; i <= this.maxLevel; i++) {
|
||||||
console.log(
|
console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
|
||||||
' ' +
|
|
||||||
i +
|
|
||||||
' -> ' +
|
|
||||||
this.getScale(i) +
|
|
||||||
' [' +
|
|
||||||
this.dimensions(i) +
|
|
||||||
']'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
console.log(this.urlForTile(this.baseLevel, 0, 0))
|
console.log(this.urlForTile(this.baseLevel, 0, 0))
|
||||||
}
|
}
|
||||||
@ -279,12 +270,7 @@ class TileQuadNode {
|
|||||||
**/
|
**/
|
||||||
noQuads() {
|
noQuads() {
|
||||||
if (this.previous === null) return false
|
if (this.previous === null) return false
|
||||||
return (
|
return this.nw === null && this.ne === null && this.sw === null && this.se === null
|
||||||
this.nw === null &&
|
|
||||||
this.ne === null &&
|
|
||||||
this.sw === null &&
|
|
||||||
this.se === null
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Unlink the given quad node
|
/** 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
|
* 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
|
* of tile layers for each zoom level. This gives the user the impression that
|
||||||
@ -356,9 +341,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
this.shadow = shadow
|
this.shadow = shadow
|
||||||
this.world = world
|
this.world = world
|
||||||
this.useWorker = useWorker
|
this.useWorker = useWorker
|
||||||
this.resolution = highResolution
|
this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
|
||||||
? Math.round(window.devicePixelRatio)
|
|
||||||
: 1
|
|
||||||
this.alpha = alpha
|
this.alpha = alpha
|
||||||
this.fastLoads = 0
|
this.fastLoads = 0
|
||||||
this.active = true
|
this.active = true
|
||||||
@ -548,7 +531,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
**/
|
**/
|
||||||
get maxScale() {
|
get maxScale() {
|
||||||
let delta = this.info.maxLevel - this.info.baseLevel
|
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.
|
/** Getter for the current width.
|
||||||
@ -563,7 +546,6 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
return this.pixelSize[1]
|
return this.pixelSize[1]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Overrides PIXI.Container.hitArea()
|
/* Overrides PIXI.Container.hitArea()
|
||||||
* Allows to optimize the hit testing. Container with hit areas are directly
|
* Allows to optimize the hit testing. Container with hit areas are directly
|
||||||
* hit tested without consideration of children.
|
* hit tested without consideration of children.
|
||||||
@ -671,11 +653,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
let topLeft = tiles.toLocal(worldTopLeft)
|
let topLeft = tiles.toLocal(worldTopLeft)
|
||||||
let bottomRight = tiles.toLocal(worldBottomRight)
|
let bottomRight = tiles.toLocal(worldBottomRight)
|
||||||
tiles._centerPoint = tilesCenter
|
tiles._centerPoint = tilesCenter
|
||||||
let bounds = new PIXI.Rectangle(
|
let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
|
||||||
topLeft.x,
|
|
||||||
topLeft.y,
|
|
||||||
bottomRight.x - topLeft.x,
|
|
||||||
bottomRight.y - topLeft.y)
|
|
||||||
|
|
||||||
tiles._boundsRect = bounds
|
tiles._boundsRect = bounds
|
||||||
|
|
||||||
@ -720,9 +698,6 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
return { centerCol, centerRow, needed }
|
return { centerCol, centerRow, needed }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** Returns all changed tiles for a given level.
|
/** Returns all changed tiles for a given level.
|
||||||
* @param {Tiles} tiles - the grid of tiles
|
* @param {Tiles} tiles - the grid of tiles
|
||||||
* @param {number} level - The zoom level of the grid
|
* @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
|
* @param {PIXI.Point} about - point of interaction
|
||||||
*/
|
*/
|
||||||
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
|
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
|
||||||
if (tiles.isComplete())
|
if (tiles.isComplete()) return
|
||||||
return
|
|
||||||
let referenceCol = -1
|
let referenceCol = -1
|
||||||
let referenceRow = -1
|
let referenceRow = -1
|
||||||
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
|
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
|
||||||
@ -787,8 +761,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
let scaledTileSize = tiles.tileSize * tiles.tileScale
|
let scaledTileSize = tiles.tileSize * tiles.tileScale
|
||||||
referenceCol = Math.floor(refPoint.x / scaledTileSize)
|
referenceCol = Math.floor(refPoint.x / scaledTileSize)
|
||||||
referenceRow = Math.floor(refPoint.y / scaledTileSize)
|
referenceRow = Math.floor(refPoint.y / scaledTileSize)
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
referenceCol = centerCol
|
referenceCol = centerCol
|
||||||
referenceRow = centerRow
|
referenceRow = centerRow
|
||||||
}
|
}
|
||||||
@ -826,17 +799,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
let [cols, rows, w, h] = this.info.dimensions(level)
|
let [cols, rows, w, h] = this.info.dimensions(level)
|
||||||
let increasedLevels = level - this.info.baseLevel
|
let increasedLevels = level - this.info.baseLevel
|
||||||
let invScale = Math.pow(0.5, increasedLevels)
|
let invScale = Math.pow(0.5, increasedLevels)
|
||||||
let tiles = new Tiles(
|
let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
|
||||||
level,
|
|
||||||
this,
|
|
||||||
invScale,
|
|
||||||
cols,
|
|
||||||
rows,
|
|
||||||
w,
|
|
||||||
h,
|
|
||||||
this.info.tileSize,
|
|
||||||
this.info.overlap
|
|
||||||
)
|
|
||||||
this.addTiles(key, tiles)
|
this.addTiles(key, tiles)
|
||||||
if (this.info.clip) {
|
if (this.info.clip) {
|
||||||
let rest = this.info.rests[level]
|
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
|
* Destroy tiles in all layers that are no longer needed
|
||||||
*
|
*
|
||||||
@ -1031,8 +993,7 @@ export class DeepZoomImage extends PIXI.Container {
|
|||||||
})
|
})
|
||||||
if (this.fastLoads == 3) {
|
if (this.fastLoads == 3) {
|
||||||
this.fastLoads = 0
|
this.fastLoads = 0
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -62,7 +62,7 @@ export class TileLoader {
|
|||||||
_textureAvailable(url, col, row, texture) {
|
_textureAvailable(url, col, row, texture) {
|
||||||
let tile = this.loaded.get(url)
|
let tile = this.loaded.get(url)
|
||||||
if (tile != null) {
|
if (tile != null) {
|
||||||
console.warn("Tile already loaded")
|
console.warn('Tile already loaded')
|
||||||
tile.unregister()
|
tile.unregister()
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
@ -70,9 +70,8 @@ export class TileLoader {
|
|||||||
this.loaded.set(url, tile)
|
this.loaded.set(url, tile)
|
||||||
this.tiles.tileAvailable(tile, col, row, url)
|
this.tiles.tileAvailable(tile, col, row, url)
|
||||||
} catch (error) {
|
} 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.
|
* Calls the Tiles.tileAvailable method if the texture is available.
|
||||||
**/
|
**/
|
||||||
export class PIXITileLoader extends TileLoader {
|
export class PIXITileLoader extends TileLoader {
|
||||||
|
|
||||||
constructor(tiles, compression) {
|
constructor(tiles, compression) {
|
||||||
super(tiles)
|
super(tiles)
|
||||||
this.destroyed = false
|
this.destroyed = false
|
||||||
@ -124,15 +122,13 @@ export class PIXITileLoader extends TileLoader {
|
|||||||
|
|
||||||
/** Load one and only one of the scheduled tiles **/
|
/** Load one and only one of the scheduled tiles **/
|
||||||
loadOneTile() {
|
loadOneTile() {
|
||||||
if (this.destroyed)
|
if (this.destroyed) return
|
||||||
return
|
|
||||||
this._loadOneTile()
|
this._loadOneTile()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Load all scheduled tiles **/
|
/** Load all scheduled tiles **/
|
||||||
loadAll() {
|
loadAll() {
|
||||||
if (this.destroyed)
|
if (this.destroyed) return
|
||||||
return
|
|
||||||
this._loadAllTiles()
|
this._loadAllTiles()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -143,7 +139,7 @@ export class PIXITileLoader extends TileLoader {
|
|||||||
try {
|
try {
|
||||||
this.loader.reset()
|
this.loader.reset()
|
||||||
} catch (error) {
|
} 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 texture = resource.texture
|
||||||
let url = resource.url
|
let url = resource.url
|
||||||
Tile.lateTexture(url, texture)
|
Tile.lateTexture(url, texture)
|
||||||
console.warn("Received resource after destroy", texture)
|
console.warn('Received resource after destroy', texture)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
let [col, row] = this.map.get(resource.url)
|
let [col, row] = this.map.get(resource.url)
|
||||||
this._textureAvailable(resource.url, col, row, resource.texture)
|
this._textureAvailable(resource.url, col, row, resource.texture)
|
||||||
}
|
} catch (err) {
|
||||||
catch (err) {
|
console.warn('Texture unavailable: ' + err.message)
|
||||||
console.warn("Texture unavailable: " + err.message)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -216,9 +211,8 @@ export class PIXITileLoader extends TileLoader {
|
|||||||
if (!this.loaded.has(url)) {
|
if (!this.loaded.has(url)) {
|
||||||
let resource = this.loader.resources[url]
|
let resource = this.loader.resources[url]
|
||||||
if (resource) {
|
if (resource) {
|
||||||
console.log("Resource already added", url)
|
console.log('Resource already added', url)
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
urls.push(url)
|
urls.push(url)
|
||||||
i += 1
|
i += 1
|
||||||
}
|
}
|
||||||
@ -237,7 +231,6 @@ export class PIXITileLoader extends TileLoader {
|
|||||||
* Calls the Tiles.tileAvailable method if the texture is available.
|
* Calls the Tiles.tileAvailable method if the texture is available.
|
||||||
**/
|
**/
|
||||||
export class RequestTileLoader extends TileLoader {
|
export class RequestTileLoader extends TileLoader {
|
||||||
|
|
||||||
constructor(tiles, compression) {
|
constructor(tiles, compression) {
|
||||||
super(tiles)
|
super(tiles)
|
||||||
this.compression = compression
|
this.compression = compression
|
||||||
@ -255,10 +248,7 @@ export class RequestTileLoader extends TileLoader {
|
|||||||
xhr.responseType = 'arraybuffer'
|
xhr.responseType = 'arraybuffer'
|
||||||
xhr.onload = e => {
|
xhr.onload = e => {
|
||||||
let CompressedImage = PIXI.compressedTextures.CompressedImage
|
let CompressedImage = PIXI.compressedTextures.CompressedImage
|
||||||
let compressed = CompressedImage.loadFromArrayBuffer(
|
let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
|
||||||
xhr.response,
|
|
||||||
url
|
|
||||||
)
|
|
||||||
let base = new PIXI.BaseTexture(compressed)
|
let base = new PIXI.BaseTexture(compressed)
|
||||||
let texture = new PIXI.Texture(base)
|
let texture = new PIXI.Texture(base)
|
||||||
this._textureAvailable(url, col, row, texture)
|
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
|
* Uses Workers but can be replaced with other loaders implementing
|
||||||
* the public methods without underscore.
|
* the public methods without underscore.
|
||||||
* Calls the Tiles.tileAvailable method if the texture is available.
|
* Calls the Tiles.tileAvailable method if the texture is available.
|
||||||
**/
|
**/
|
||||||
export class WorkerTileLoader extends TileLoader {
|
export class WorkerTileLoader extends TileLoader {
|
||||||
|
|
||||||
constructor(tiles, workerPath) {
|
constructor(tiles, workerPath) {
|
||||||
super(tiles)
|
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) {
|
if (event.data.success) {
|
||||||
let { url, col, row, buffer } = event.data
|
let { url, col, row, buffer } = event.data
|
||||||
//console.log("WorkerTileLoader.loaded", url, buffer)
|
//console.log("WorkerTileLoader.loaded", url, buffer)
|
||||||
@ -350,7 +338,7 @@ export class WorkerTileLoader extends TileLoader {
|
|||||||
let url = this.loadQueue.pop()
|
let url = this.loadQueue.pop()
|
||||||
let [col, row] = this.map.get(url)
|
let [col, row] = this.map.get(url)
|
||||||
let tile = [col, row, 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)
|
let [col, row] = this.map.get(url)
|
||||||
tiles.push([col, row, url])
|
tiles.push([col, row, url])
|
||||||
}
|
}
|
||||||
this.worker.postMessage({ command: "load", tiles })
|
this.worker.postMessage({ command: 'load', tiles })
|
||||||
}
|
}
|
||||||
|
|
||||||
cancel() {
|
cancel() {
|
||||||
super.cancel()
|
super.cancel()
|
||||||
this.worker.postMessage({ command: "abort" })
|
this.worker.postMessage({ command: 'abort' })
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
this.worker.postMessage({ command: "abort" })
|
this.worker.postMessage({ command: 'abort' })
|
||||||
this.worker.terminate()
|
this.worker.terminate()
|
||||||
this.worker = null
|
this.worker = null
|
||||||
super.destroy()
|
super.destroy()
|
||||||
|
|||||||
@ -77,11 +77,10 @@ export default class Tile extends PIXI.Sprite {
|
|||||||
if (registeredTiles.has(url)) {
|
if (registeredTiles.has(url)) {
|
||||||
let tiles = registeredTiles.get(url)
|
let tiles = registeredTiles.get(url)
|
||||||
tiles.add(this)
|
tiles.add(this)
|
||||||
if (debug) console.log("Tile.register", url, tiles.size)
|
if (debug) console.log('Tile.register', url, tiles.size)
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
registeredTiles.set(url, new Set([this]))
|
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 })
|
keptTextures.push({ url: this.url, texture: this.texture })
|
||||||
|
|
||||||
let opts = { children: true, texture: false, baseTexture: false }
|
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)
|
super.destroy(opts)
|
||||||
|
|
||||||
while (keptTextures.length > keepTextures) {
|
while (keptTextures.length > keepTextures) {
|
||||||
let { url, texture } = keptTextures.shift()
|
let { url, texture } = keptTextures.shift()
|
||||||
if (Tile.isObsolete(url)) {
|
if (Tile.isObsolete(url)) {
|
||||||
texture.destroy(true) // Destroy base as well
|
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
|
// 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 }
|
let opts = { children: true, texture: true, baseTexture: true }
|
||||||
super.destroy(opts)
|
super.destroy(opts)
|
||||||
if (debug) console.log("Tile.destroy", registeredTiles.size, opts)
|
if (debug) console.log('Tile.destroy', registeredTiles.size, opts)
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
let opts = { children: true, texture: false, baseTexture: false }
|
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)
|
super.destroy(opts)
|
||||||
}
|
}
|
||||||
if (this.parent != null) {
|
if (this.parent != null) {
|
||||||
// UO: Emit warning and remove
|
// UO: Emit warning and remove
|
||||||
console.warn("Destroying tile with parent. Hiding instead")
|
console.warn('Destroying tile with parent. Hiding instead')
|
||||||
this.visible = false
|
this.visible = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -172,10 +170,9 @@ export default class Tile extends PIXI.Sprite {
|
|||||||
renderWebGL(renderer) {
|
renderWebGL(renderer) {
|
||||||
try {
|
try {
|
||||||
super.renderWebGL(renderer)
|
super.renderWebGL(renderer)
|
||||||
}
|
} catch (e) {
|
||||||
catch (e) {
|
|
||||||
// We want persistent logging here
|
// 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)
|
if (count > 0) console.log('Sweeping textures', count)
|
||||||
console.log("Sweeping textures", count)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,18 +4,17 @@ const batchSize = 8
|
|||||||
const debug = false
|
const debug = false
|
||||||
|
|
||||||
function load() {
|
function load() {
|
||||||
|
|
||||||
while (loadQueue.length > 0 && pendingRequests.size < batchSize) {
|
while (loadQueue.length > 0 && pendingRequests.size < batchSize) {
|
||||||
let tile = loadQueue.shift()
|
let tile = loadQueue.shift()
|
||||||
let [col, row, url] = tile
|
let [col, row, url] = tile
|
||||||
let xhr = new XMLHttpRequest()
|
let xhr = new XMLHttpRequest()
|
||||||
xhr.responseType = 'arraybuffer'
|
xhr.responseType = 'arraybuffer'
|
||||||
xhr.onload = (event) => {
|
xhr.onload = event => {
|
||||||
pendingRequests.delete(url)
|
pendingRequests.delete(url)
|
||||||
let buffer = xhr.response
|
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)
|
pendingRequests.delete(url)
|
||||||
let buffer = null
|
let buffer = null
|
||||||
postMessage({ success: false, url, col, row, buffer })
|
postMessage({ success: false, url, col, row, buffer })
|
||||||
@ -24,14 +23,13 @@ function load() {
|
|||||||
xhr.send()
|
xhr.send()
|
||||||
pendingRequests.set(url, xhr)
|
pendingRequests.set(url, xhr)
|
||||||
}
|
}
|
||||||
if (loadQueue.length>0)
|
if (loadQueue.length > 0) setTimeout(load, 1000 / 120)
|
||||||
setTimeout(load, 1000/120)
|
|
||||||
else {
|
else {
|
||||||
if (debug) console.log('Ready')
|
if (debug) console.log('Ready')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
self.onmessage = (event) => {
|
self.onmessage = event => {
|
||||||
let msg = event.data
|
let msg = event.data
|
||||||
switch (msg.command) {
|
switch (msg.command) {
|
||||||
case 'load':
|
case 'load':
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import { Colors } from '../../utils.js'
|
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
|
* 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
|
* @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set
|
||||||
**/
|
**/
|
||||||
export class Tiles extends PIXI.Container {
|
export class Tiles extends PIXI.Container {
|
||||||
constructor(
|
constructor(level, view, scale, cols, rows, width, height, tileSize, overlap, fadeInTime = 0.33) {
|
||||||
level,
|
|
||||||
view,
|
|
||||||
scale,
|
|
||||||
cols,
|
|
||||||
rows,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
tileSize,
|
|
||||||
overlap,
|
|
||||||
fadeInTime = 0.33
|
|
||||||
) {
|
|
||||||
super()
|
super()
|
||||||
this.debug = false
|
this.debug = false
|
||||||
this.showGrid = false
|
this.showGrid = false
|
||||||
@ -66,8 +54,6 @@ export class Tiles extends PIXI.Container {
|
|||||||
this.destroyed = false
|
this.destroyed = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** Tests whether all tiles are loaded. **/
|
/** Tests whether all tiles are loaded. **/
|
||||||
isComplete() {
|
isComplete() {
|
||||||
return this.cols * this.rows === this.children.length
|
return this.cols * this.rows === this.children.length
|
||||||
@ -276,8 +262,7 @@ export class Tiles extends PIXI.Container {
|
|||||||
count += 1
|
count += 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (count && this.debug)
|
if (count && this.debug) console.log('destroyTiles', this.level, count)
|
||||||
console.log('destroyTiles', this.level, count)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
destroyUnneededTiles() {
|
destroyUnneededTiles() {
|
||||||
@ -288,8 +273,7 @@ export class Tiles extends PIXI.Container {
|
|||||||
count += 1
|
count += 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (count && this.debug)
|
if (count && this.debug) console.log('destroyUnneededTiles', this.level, count)
|
||||||
console.log('destroyUnneededTiles', this.level, count)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
highlightInfos() {
|
highlightInfos() {
|
||||||
|
|||||||
@ -112,15 +112,9 @@ export default class FlipEffect {
|
|||||||
this.scatter = scatter
|
this.scatter = scatter
|
||||||
this.backLoader = backLoader
|
this.backLoader = backLoader
|
||||||
this.scatterLoader = new ScatterLoader(scatter)
|
this.scatterLoader = new ScatterLoader(scatter)
|
||||||
this.domFlip = new DOMFlip(
|
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
|
||||||
domScatterContainer,
|
|
||||||
flipTemplate,
|
|
||||||
this.scatterLoader,
|
|
||||||
backLoader,
|
|
||||||
{
|
|
||||||
onBack: this.backCardClosed.bind(this)
|
onBack: this.backCardClosed.bind(this)
|
||||||
}
|
})
|
||||||
)
|
|
||||||
this.setupInfoButton()
|
this.setupInfoButton()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -147,11 +141,7 @@ export default class FlipEffect {
|
|||||||
let center = this.scatter.center
|
let center = this.scatter.center
|
||||||
let canvas = app.renderer.view
|
let canvas = app.renderer.view
|
||||||
let domNode = this.domFlip.domScatterContainer.element
|
let domNode = this.domFlip.domScatterContainer.element
|
||||||
let page = window.convertPointFromNodeToPage(
|
let page = window.convertPointFromNodeToPage(canvas, center.x * resolution, center.y * resolution)
|
||||||
canvas,
|
|
||||||
center.x * resolution,
|
|
||||||
center.y * resolution
|
|
||||||
)
|
|
||||||
let local = window.convertPointFromPageToNode(domNode, page.x, page.y)
|
let local = window.convertPointFromPageToNode(domNode, page.x, page.y)
|
||||||
return local
|
return local
|
||||||
}
|
}
|
||||||
@ -231,9 +221,7 @@ export default class FlipEffect {
|
|||||||
canvas.height = 44 * 4
|
canvas.height = 44 * 4
|
||||||
svgImage.onload = e => {
|
svgImage.onload = e => {
|
||||||
let displayObject = this.scatter.displayObject
|
let displayObject = this.scatter.displayObject
|
||||||
canvas
|
canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height)
|
||||||
.getContext('2d')
|
|
||||||
.drawImage(svgImage, 0, 0, canvas.width, canvas.height)
|
|
||||||
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
|
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
|
||||||
this.infoBtn = new PIXI.Sprite(texure)
|
this.infoBtn = new PIXI.Sprite(texure)
|
||||||
this.infoBtn.anchor.set(0.5, 0.5)
|
this.infoBtn.anchor.set(0.5, 0.5)
|
||||||
|
|||||||
@ -93,12 +93,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
|
|
||||||
// planes
|
// planes
|
||||||
//--------------------
|
//--------------------
|
||||||
this.setPlanes(
|
this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic)
|
||||||
this.opts.focus,
|
|
||||||
this.opts.near,
|
|
||||||
this.opts.far,
|
|
||||||
this.opts.orthographic
|
|
||||||
)
|
|
||||||
|
|
||||||
// flipped
|
// flipped
|
||||||
//--------------------
|
//--------------------
|
||||||
@ -137,9 +132,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
|
|
||||||
// shadow
|
// shadow
|
||||||
//--------------------
|
//--------------------
|
||||||
const shadow = new PIXI.projection.Sprite3d(
|
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
|
||||||
PIXI.Texture.fromImage('../../assets/images/shadow.png')
|
|
||||||
)
|
|
||||||
shadow.renderable = false
|
shadow.renderable = false
|
||||||
shadow.anchor.set(0.5)
|
shadow.anchor.set(0.5)
|
||||||
shadow.scale3d.set(0.98)
|
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,
|
y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y,
|
||||||
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
|
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
|
||||||
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
|
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
|
||||||
width: this.opts.useBackTransforms
|
width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
|
||||||
? toObject.width * 2
|
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
|
||||||
: fromObject.width * 2,
|
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
|
||||||
height: this.opts.useBackTransforms
|
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
|
||||||
? toObject.height * 2
|
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
|
||||||
: fromObject.height * 2,
|
|
||||||
rotation: this.opts.useBackTransforms
|
|
||||||
? toObject.rotation
|
|
||||||
: fromObject.rotation,
|
|
||||||
skewX: this.opts.useBackTransforms
|
|
||||||
? toObject.skew.x
|
|
||||||
: fromObject.skew.x,
|
|
||||||
skewY: this.opts.useBackTransforms
|
|
||||||
? toObject.skew.y
|
|
||||||
: fromObject.skew.y
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// set toObject end values
|
// set toObject end values
|
||||||
@ -331,15 +314,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
|
|
||||||
// shadow
|
// shadow
|
||||||
//--------------------
|
//--------------------
|
||||||
new TimelineMax()
|
new TimelineMax().to(shadow, half, { alpha: 0.3, ease }).to(shadow, half, { alpha: 0.7, ease })
|
||||||
.to(shadow, half, { alpha: 0.3, ease })
|
|
||||||
.to(shadow, half, { alpha: 0.7, ease })
|
|
||||||
|
|
||||||
// blurfilter
|
// blurfilter
|
||||||
//--------------------
|
//--------------------
|
||||||
new TimelineMax()
|
new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease })
|
||||||
.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 shadow = this.objects.shadow
|
||||||
const inner = this.objects.inner
|
const inner = this.objects.inner
|
||||||
|
|
||||||
inner.position3d.z =
|
inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
|
||||||
-Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
|
|
||||||
|
|
||||||
//this.objects.shadow.euler = this.objects.inner.euler
|
//this.objects.shadow.euler = this.objects.inner.euler
|
||||||
shadow.euler.x = -inner.euler.x
|
shadow.euler.x = -inner.euler.x
|
||||||
@ -421,10 +399,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
|||||||
generateTexture(displayObject) {
|
generateTexture(displayObject) {
|
||||||
// renderTexture
|
// renderTexture
|
||||||
//--------------------
|
//--------------------
|
||||||
const renderTexture = PIXI.RenderTexture.create(
|
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
|
||||||
displayObject.width,
|
|
||||||
displayObject.height
|
|
||||||
)
|
|
||||||
|
|
||||||
// save position
|
// save position
|
||||||
const transform = [
|
const transform = [
|
||||||
|
|||||||
@ -77,15 +77,9 @@ export class Hypenate {
|
|||||||
let first = true
|
let first = true
|
||||||
let lastPart = ''
|
let lastPart = ''
|
||||||
for (let part of parts) {
|
for (let part of parts) {
|
||||||
let partMetrics = PIXI.TextMetrics.measureText(
|
let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle)
|
||||||
part,
|
|
||||||
pixiStyle
|
|
||||||
)
|
|
||||||
if (x + partMetrics.width + space.width > width) {
|
if (x + partMetrics.width + space.width > width) {
|
||||||
newWord +=
|
newWord += (first || lastPart.endsWith('-') ? '\n' : '-\n') + part
|
||||||
(first || lastPart.endsWith('-')
|
|
||||||
? '\n'
|
|
||||||
: '-\n') + part
|
|
||||||
x = partMetrics.width
|
x = partMetrics.width
|
||||||
} else {
|
} else {
|
||||||
newWord += part
|
newWord += part
|
||||||
@ -136,12 +130,7 @@ class TextLabel extends PIXI.Text {
|
|||||||
* @param {canvas}
|
* @param {canvas}
|
||||||
* @memberof TextLabel
|
* @memberof TextLabel
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(text, style = null, canvas = null, { minZoom = 0.1, maxZoom = 10 } = {}) {
|
||||||
text,
|
|
||||||
style = null,
|
|
||||||
canvas = null,
|
|
||||||
{ minZoom = 0.1, maxZoom = 10 } = {}
|
|
||||||
) {
|
|
||||||
super(text, style, canvas)
|
super(text, style, canvas)
|
||||||
this.normFontSize = this.style.fontSize
|
this.normFontSize = this.style.fontSize
|
||||||
this.minZoom = minZoom
|
this.minZoom = minZoom
|
||||||
@ -290,21 +279,11 @@ export class LabeledGraphics extends PIXI.Graphics {
|
|||||||
const truncatedLines = lines.slice(0, maxLines)
|
const truncatedLines = lines.slice(0, maxLines)
|
||||||
const lastLine = truncatedLines[truncatedLines.length - 1]
|
const lastLine = truncatedLines[truncatedLines.length - 1]
|
||||||
const words = lastLine.split(' ')
|
const words = lastLine.split(' ')
|
||||||
const wordMetrics = PIXI.TextMetrics.measureText(
|
const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
|
||||||
`\u00A0\n...\n${words.join('\n')}`,
|
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
|
||||||
pixiStyle
|
|
||||||
)
|
|
||||||
const [
|
|
||||||
spaceLength,
|
|
||||||
dotsLength,
|
|
||||||
...wordLengths
|
|
||||||
] = wordMetrics.lineWidths
|
|
||||||
const { text: newLastLine } = wordLengths.reduce(
|
const { text: newLastLine } = wordLengths.reduce(
|
||||||
(data, wordLength, i) => {
|
(data, wordLength, i) => {
|
||||||
if (
|
if (data.length + wordLength + spaceLength >= wordWrapWidth) {
|
||||||
data.length + wordLength + spaceLength >=
|
|
||||||
wordWrapWidth
|
|
||||||
) {
|
|
||||||
return { ...data, length: wordWrapWidth }
|
return { ...data, length: wordWrapWidth }
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
/* globals */
|
/* globals ThrowPropsPlugin, Strong */
|
||||||
|
|
||||||
/* Imports */
|
/* Imports */
|
||||||
import Events from '../events.js'
|
import Events from '../events.js'
|
||||||
@ -108,9 +108,7 @@ export default class List extends PIXI.Container {
|
|||||||
if (this.opts.app) {
|
if (this.opts.app) {
|
||||||
const app = this.opts.app
|
const app = this.opts.app
|
||||||
app.view.addEventListener('mousewheel', event => {
|
app.view.addEventListener('mousewheel', event => {
|
||||||
const bounds = this.mask
|
const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
|
||||||
? this.mask.getBounds()
|
|
||||||
: this.getBounds()
|
|
||||||
const x = event.clientX - app.view.getBoundingClientRect().left
|
const x = event.clientX - app.view.getBoundingClientRect().left
|
||||||
const y = event.clientY - app.view.getBoundingClientRect().top
|
const y = event.clientY - app.view.getBoundingClientRect().top
|
||||||
if (bounds.contains(x, y)) {
|
if (bounds.contains(x, y)) {
|
||||||
@ -167,14 +165,10 @@ export default class List extends PIXI.Container {
|
|||||||
if (this.opts.orientation === 'vertical') {
|
if (this.opts.orientation === 'vertical') {
|
||||||
switch (this.opts.align) {
|
switch (this.opts.align) {
|
||||||
case 'center':
|
case 'center':
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2))
|
||||||
it => (it.x = margin + this.width / 2 - it.width / 2)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.x = margin + this.width - it.width))
|
||||||
it => (it.x = margin + this.width - it.width)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
this.__items.forEach(it => (it.x = margin))
|
this.__items.forEach(it => (it.x = margin))
|
||||||
@ -200,14 +194,10 @@ export default class List extends PIXI.Container {
|
|||||||
this.__items.forEach(it => (it.y = margin))
|
this.__items.forEach(it => (it.y = margin))
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.y = margin + this.height - it.height))
|
||||||
it => (it.y = margin + this.height - it.height)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
this.__items.forEach(
|
this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2))
|
||||||
it => (it.y = margin + this.height / 2 - it.height / 2)
|
|
||||||
)
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -341,8 +331,7 @@ export default class List extends PIXI.Container {
|
|||||||
{
|
{
|
||||||
throwProps,
|
throwProps,
|
||||||
ease: Strong.easeOut,
|
ease: Strong.easeOut,
|
||||||
onComplete: () =>
|
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
|
||||||
ThrowPropsPlugin.untrack(this.container.position)
|
|
||||||
},
|
},
|
||||||
0.8,
|
0.8,
|
||||||
0.4
|
0.4
|
||||||
@ -363,20 +352,14 @@ export default class List extends PIXI.Container {
|
|||||||
this.container.position.x -= event.deltaX
|
this.container.position.x -= event.deltaX
|
||||||
if (this.container.position.x > 0) {
|
if (this.container.position.x > 0) {
|
||||||
this.container.position.x = 0
|
this.container.position.x = 0
|
||||||
} else if (
|
} else if (this.container.position.x + this.innerWidth < this.opts.width) {
|
||||||
this.container.position.x + this.innerWidth <
|
|
||||||
this.opts.width
|
|
||||||
) {
|
|
||||||
this.container.position.x = this.opts.width - this.innerWidth
|
this.container.position.x = this.opts.width - this.innerWidth
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.container.position.y -= event.deltaY
|
this.container.position.y -= event.deltaY
|
||||||
if (this.container.position.y > 0) {
|
if (this.container.position.y > 0) {
|
||||||
this.container.position.y = 0
|
this.container.position.y = 0
|
||||||
} else if (
|
} else if (this.container.position.y + this.innerHeight < this.opts.height) {
|
||||||
this.container.position.y + this.innerHeight <
|
|
||||||
this.opts.height
|
|
||||||
) {
|
|
||||||
this.container.position.y = this.opts.height - this.innerHeight
|
this.container.position.y = this.opts.height - this.innerHeight
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -388,10 +371,7 @@ export default class List extends PIXI.Container {
|
|||||||
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
|
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
|
||||||
*/
|
*/
|
||||||
capture(event) {
|
capture(event) {
|
||||||
const originalEvent =
|
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
|
||||||
event.data && event.data.originalEvent
|
|
||||||
? event.data.originalEvent
|
|
||||||
: event
|
|
||||||
Events.capturedBy(originalEvent, this)
|
Events.capturedBy(originalEvent, this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -91,8 +91,7 @@ export default class Message extends InteractivePopup {
|
|||||||
this.x = this.opts.app.size.width / 2 - this.width / 2
|
this.x = this.opts.app.size.width / 2 - this.width / 2
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
this.x =
|
this.x = this.opts.app.size.width - this.opts.margin - this.width
|
||||||
this.opts.app.size.width - this.opts.margin - this.width
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,8 +104,7 @@ export default class Message extends InteractivePopup {
|
|||||||
this.y = this.opts.app.size.height / 2 - this.height / 2
|
this.y = this.opts.app.size.height / 2 - this.height / 2
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
this.y =
|
this.y = this.opts.app.size.height - this.opts.margin - this.height
|
||||||
this.opts.app.size.height - this.opts.margin - this.height
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -134,10 +134,7 @@ export default class Modal extends PIXI.Container {
|
|||||||
// background
|
// background
|
||||||
//-----------------
|
//-----------------
|
||||||
this.background.clear()
|
this.background.clear()
|
||||||
this.background.beginFill(
|
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
|
||||||
this.opts.backgroundFill,
|
|
||||||
this.opts.backgroundFillAlpha
|
|
||||||
)
|
|
||||||
this.background.drawRect(0, 0, width, height)
|
this.background.drawRect(0, 0, width, height)
|
||||||
this.background.endFill()
|
this.background.endFill()
|
||||||
|
|
||||||
|
|||||||
@ -36,12 +36,8 @@ export default class Popover extends PIXI.Graphics {
|
|||||||
wordWrapWidth: width - this.padding * 2
|
wordWrapWidth: width - this.padding * 2
|
||||||
}
|
}
|
||||||
|
|
||||||
this.titleTextStyle = new PIXI.TextStyle(
|
this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))
|
||||||
Object.assign({}, style, titleStyle)
|
this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle))
|
||||||
)
|
|
||||||
this.textTextStyle = new PIXI.TextStyle(
|
|
||||||
Object.assign({}, style, textStyle)
|
|
||||||
)
|
|
||||||
|
|
||||||
if (title || text) {
|
if (title || text) {
|
||||||
this.setup()
|
this.setup()
|
||||||
@ -64,10 +60,7 @@ export default class Popover extends PIXI.Graphics {
|
|||||||
|
|
||||||
if (this.opts.text) {
|
if (this.opts.text) {
|
||||||
this.textText = new PIXI.Text(this.opts.text, this.textTextStyle)
|
this.textText = new PIXI.Text(this.opts.text, this.textTextStyle)
|
||||||
this.textText.position.set(
|
this.textText.position.set(this.padding, this.titleY + this.titleHeight + this.padding)
|
||||||
this.padding,
|
|
||||||
this.titleY + this.titleHeight + this.padding
|
|
||||||
)
|
|
||||||
this.addChild(this.textText)
|
this.addChild(this.textText)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -73,10 +73,7 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
// closeButton
|
// closeButton
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.closeButton) {
|
if (this.opts.closeButton) {
|
||||||
let closeButton = PIXI.Sprite.fromImage(
|
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
|
||||||
'../../assets/icons/close.png',
|
|
||||||
true
|
|
||||||
)
|
|
||||||
closeButton.width = this.headerStyle.fontSize
|
closeButton.width = this.headerStyle.fontSize
|
||||||
closeButton.height = closeButton.width
|
closeButton.height = closeButton.width
|
||||||
closeButton.tint = this.theme.color2
|
closeButton.tint = this.theme.color2
|
||||||
@ -100,10 +97,7 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.maxWidth) {
|
if (this.opts.maxWidth) {
|
||||||
const wordWrapWidth =
|
const wordWrapWidth =
|
||||||
this.opts.maxWidth -
|
this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
|
||||||
2 * this.opts.padding -
|
|
||||||
this.smallPadding -
|
|
||||||
this._closeButton.width
|
|
||||||
if (this._header) {
|
if (this._header) {
|
||||||
this.headerStyle.wordWrapWidth = wordWrapWidth
|
this.headerStyle.wordWrapWidth = wordWrapWidth
|
||||||
} else if (this._content) {
|
} else if (this._content) {
|
||||||
@ -116,18 +110,10 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.button || this.opts.buttonGroup) {
|
if (this.opts.button || this.opts.buttonGroup) {
|
||||||
if (this.opts.button) {
|
if (this.opts.button) {
|
||||||
this._buttons = new Button(
|
this._buttons = new Button(Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.button))
|
||||||
Object.assign(
|
|
||||||
{ textStyle: this.theme.textStyleSmall },
|
|
||||||
this.opts.button
|
|
||||||
)
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this._buttons = new ButtonGroup(
|
this._buttons = new ButtonGroup(
|
||||||
Object.assign(
|
Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
|
||||||
{ textStyle: this.theme.textStyleSmall },
|
|
||||||
this.opts.buttonGroup
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
this.addChild(this._buttons)
|
this.addChild(this._buttons)
|
||||||
@ -149,18 +135,15 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
// closeButton
|
// closeButton
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.closeButton) {
|
if (this.opts.closeButton) {
|
||||||
this._closeButton.x =
|
this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width
|
||||||
this.wantedWidth - this.smallPadding - this._closeButton.width
|
|
||||||
this._closeButton.y = this.smallPadding
|
this._closeButton.y = this.smallPadding
|
||||||
}
|
}
|
||||||
|
|
||||||
// buttons
|
// buttons
|
||||||
//-----------------
|
//-----------------
|
||||||
if (this._buttons) {
|
if (this._buttons) {
|
||||||
this._buttons.x =
|
this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
|
||||||
this.wantedWidth - this.opts.padding - this._buttons.width
|
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
|
||||||
this._buttons.y =
|
|
||||||
this.wantedHeight - this.opts.padding - this._buttons.height
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return this
|
return this
|
||||||
@ -183,10 +166,7 @@ export class InteractivePopup extends AbstractPopup {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (this._buttons) {
|
if (this._buttons) {
|
||||||
size.width = Math.max(
|
size.width = Math.max(size.width, this._buttons.x + this._buttons.width)
|
||||||
size.width,
|
|
||||||
this._buttons.x + this._buttons.width
|
|
||||||
)
|
|
||||||
size.height += this.innerPadding + this._buttons.height
|
size.height += this.innerPadding + this._buttons.height
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -74,10 +74,7 @@ export default class PopupMenu extends Popup {
|
|||||||
let object = null
|
let object = null
|
||||||
|
|
||||||
if (item.label) {
|
if (item.label) {
|
||||||
object = new PIXI.Text(
|
object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle)
|
||||||
item.label,
|
|
||||||
item.textStyle || this.opts.textStyle
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
object = item.content
|
object = item.content
|
||||||
}
|
}
|
||||||
|
|||||||
@ -154,10 +154,7 @@ export default class Progress extends PIXI.Container {
|
|||||||
//-----------------
|
//-----------------
|
||||||
if (this.opts.background) {
|
if (this.opts.background) {
|
||||||
this.background.clear()
|
this.background.clear()
|
||||||
this.background.beginFill(
|
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
|
||||||
this.opts.backgroundFill,
|
|
||||||
this.opts.backgroundFillAlpha
|
|
||||||
)
|
|
||||||
this.background.drawRect(0, 0, width, height)
|
this.background.drawRect(0, 0, width, height)
|
||||||
this.background.endFill()
|
this.background.endFill()
|
||||||
}
|
}
|
||||||
@ -201,20 +198,10 @@ export default class Progress extends PIXI.Container {
|
|||||||
const wantedWidth = this.opts.width || width - 2 * this.opts.margin
|
const wantedWidth = this.opts.width || width - 2 * this.opts.margin
|
||||||
const wantedHeight = this.opts.height
|
const wantedHeight = this.opts.height
|
||||||
|
|
||||||
this.bar.lineStyle(
|
this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.bar.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.bar.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
if (this.radius > 1) {
|
if (this.radius > 1) {
|
||||||
this.bar.drawRoundedRect(
|
this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
wantedWidth,
|
|
||||||
wantedHeight,
|
|
||||||
this.radius
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
|
this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
|
||||||
}
|
}
|
||||||
@ -238,24 +225,11 @@ export default class Progress extends PIXI.Container {
|
|||||||
|
|
||||||
const barActiveWidth = (wantedWidth * this._progress) / 100
|
const barActiveWidth = (wantedWidth * this._progress) / 100
|
||||||
|
|
||||||
this.barActive.lineStyle(
|
this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||||
this.opts.strokeActiveWidth,
|
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||||
this.opts.strokeActive,
|
|
||||||
this.opts.strokeActiveAlpha
|
|
||||||
)
|
|
||||||
this.barActive.beginFill(
|
|
||||||
this.opts.fillActive,
|
|
||||||
this.opts.fillActiveAlpha
|
|
||||||
)
|
|
||||||
if (barActiveWidth > 0) {
|
if (barActiveWidth > 0) {
|
||||||
if (this.radius > 1) {
|
if (this.radius > 1) {
|
||||||
this.barActive.drawRoundedRect(
|
this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius)
|
||||||
0,
|
|
||||||
0,
|
|
||||||
barActiveWidth,
|
|
||||||
wantedHeight,
|
|
||||||
this.radius
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
|
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
import Events from '../events.js'
|
import Events from '../events.js'
|
||||||
import { AbstractScatter } from '../scatter.js'
|
import { AbstractScatter } from '../scatter.js'
|
||||||
import { Angle, Points, Polygon } from '../utils.js'
|
import { Angle, Points, Polygon } from '../utils.js'
|
||||||
@ -79,12 +80,8 @@ export class ScatterContainer extends PIXI.Graphics {
|
|||||||
let y = 0
|
let y = 0
|
||||||
// @container: We need to call the constant values, as the container
|
// @container: We need to call the constant values, as the container
|
||||||
// gets resized, when a child moves outside the original boundaries.
|
// gets resized, when a child moves outside the original boundaries.
|
||||||
let w = this.container
|
let w = this.container ? this.containerDimensions.x : this.backgroundWidth || this.app.width
|
||||||
? this.containerDimensions.x
|
let h = this.container ? this.containerDimensions.y : this.backgroundHeight || this.app.height
|
||||||
: this.backgroundWidth || this.app.width
|
|
||||||
let h = this.container
|
|
||||||
? this.containerDimensions.y
|
|
||||||
: this.backgroundHeight || this.app.height
|
|
||||||
|
|
||||||
if (this.app.fullscreen && this.app.monkeyPatchMapping) {
|
if (this.app.fullscreen && this.app.monkeyPatchMapping) {
|
||||||
let fixed = this.mapPositionToPoint({ x: w, y: 0 })
|
let fixed = this.mapPositionToPoint({ x: w, y: 0 })
|
||||||
@ -167,14 +164,8 @@ export class ScatterContainer extends PIXI.Graphics {
|
|||||||
// if (hit) {
|
// if (hit) {
|
||||||
// console.log("findHitScatter", displayObject)
|
// console.log("findHitScatter", displayObject)
|
||||||
// }
|
// }
|
||||||
if (
|
if (hit && this.hitScatter === null && typeof displayObject != undefined) {
|
||||||
hit &&
|
this.hitScatter = displayObject.scatter ? displayObject.scatter : null
|
||||||
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 local = new PIXI.Point()
|
||||||
let interactionManager = this.renderer.plugins.interaction
|
let interactionManager = this.renderer.plugins.interaction
|
||||||
interactionManager.mapPositionToPoint(local, point.x, point.y)
|
interactionManager.mapPositionToPoint(local, point.x, point.y)
|
||||||
if (
|
if (element instanceof DisplayObjectScatter && element.displayObject.parent != null) {
|
||||||
element instanceof DisplayObjectScatter &&
|
|
||||||
element.displayObject.parent != null
|
|
||||||
) {
|
|
||||||
return element.displayObject.parent.toLocal(local)
|
return element.displayObject.parent.toLocal(local)
|
||||||
}
|
}
|
||||||
return local
|
return local
|
||||||
@ -204,12 +192,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
|||||||
this.hitScatter = null
|
this.hitScatter = null
|
||||||
let interactionManager = this.renderer.plugins.interaction
|
let interactionManager = this.renderer.plugins.interaction
|
||||||
let fakeEvent = this.fakeInteractionEvent(local)
|
let fakeEvent = this.fakeInteractionEvent(local)
|
||||||
interactionManager.processInteractive(
|
interactionManager.processInteractive(fakeEvent, this, this.findHitScatter.bind(this), true)
|
||||||
fakeEvent,
|
|
||||||
this,
|
|
||||||
this.findHitScatter.bind(this),
|
|
||||||
true
|
|
||||||
)
|
|
||||||
if (this.claimEvents) event.claimedByScatter = this.hitScatter
|
if (this.claimEvents) event.claimedByScatter = this.hitScatter
|
||||||
return this.hitScatter
|
return this.hitScatter
|
||||||
}
|
}
|
||||||
@ -223,8 +206,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
|||||||
this.hitScatter = null
|
this.hitScatter = null
|
||||||
let interactionManager = this.renderer.plugins.interaction
|
let interactionManager = this.renderer.plugins.interaction
|
||||||
let displayObject = interactionManager.hitTest(local, this)
|
let displayObject = interactionManager.hitTest(local, this)
|
||||||
if (displayObject != null && displayObject.scatter != null)
|
if (displayObject != null && displayObject.scatter != null) this.hitScatter = displayObject.scatter
|
||||||
this.hitScatter = displayObject.scatter
|
|
||||||
if (this.claimEvents) event.claimedByScatter = this.hitScatter
|
if (this.claimEvents) event.claimedByScatter = this.hitScatter
|
||||||
return this.hitScatter
|
return this.hitScatter
|
||||||
}
|
}
|
||||||
@ -352,15 +334,12 @@ export class DisplayObjectScatter extends AbstractScatter {
|
|||||||
roundPixel(value) {
|
roundPixel(value) {
|
||||||
// UO: Should be obsolete because Renderer supports roundPixels by default
|
// UO: Should be obsolete because Renderer supports roundPixels by default
|
||||||
return value
|
return value
|
||||||
let res = this.renderer.resolution
|
|
||||||
return Math.round(value * res) / res
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get container() {
|
get container() {
|
||||||
// return this.displayObject.parent
|
// return this.displayObject.parent
|
||||||
let obj = this.displayObject
|
let obj = this.displayObject
|
||||||
while (obj.parent != null && !(obj.parent instanceof ScatterContainer))
|
while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) obj = obj.parent
|
||||||
obj = obj.parent
|
|
||||||
return obj.parent
|
return obj.parent
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -469,8 +448,7 @@ export class DisplayObjectScatter extends AbstractScatter {
|
|||||||
mapPositionToContainerPoint(point) {
|
mapPositionToContainerPoint(point) {
|
||||||
// UO: We need the coordinates related to this scatter in case
|
// UO: We need the coordinates related to this scatter in case
|
||||||
// of nested scatters
|
// of nested scatters
|
||||||
if (this.container != null)
|
if (this.container != null) return this.container.mapPositionToPoint(point, this)
|
||||||
return this.container.mapPositionToPoint(point, this)
|
|
||||||
return point
|
return point
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -483,10 +461,7 @@ export class DisplayObjectScatter extends AbstractScatter {
|
|||||||
if (this.displayObject.parent instanceof ScatterContainer) {
|
if (this.displayObject.parent instanceof ScatterContainer) {
|
||||||
let scatterContainer = this.displayObject.parent
|
let scatterContainer = this.displayObject.parent
|
||||||
scatterContainer.bringToFront(this.displayObject)
|
scatterContainer.bringToFront(this.displayObject)
|
||||||
} else if (
|
} else if (this.displayObject.parent != null && this.displayObject.parent.scatter) {
|
||||||
this.displayObject.parent != null &&
|
|
||||||
this.displayObject.parent.scatter
|
|
||||||
) {
|
|
||||||
this.displayObject.parent.scatter.toFront(this.displayObject)
|
this.displayObject.parent.scatter.toFront(this.displayObject)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -238,10 +238,7 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
* @readonly
|
* @readonly
|
||||||
*/
|
*/
|
||||||
get contentWidth() {
|
get contentWidth() {
|
||||||
return (
|
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||||
this.options.boxWidth -
|
|
||||||
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -250,10 +247,7 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
* @readonly
|
* @readonly
|
||||||
*/
|
*/
|
||||||
get contentHeight() {
|
get contentHeight() {
|
||||||
return (
|
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||||
this.options.boxHeight -
|
|
||||||
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -330,19 +324,11 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
this.scrollbar.clear()
|
this.scrollbar.clear()
|
||||||
let options = {}
|
let options = {}
|
||||||
options.left = 0
|
options.left = 0
|
||||||
options.right =
|
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||||
this.scrollWidth +
|
|
||||||
(this._isScrollbarVertical ? this.options.scrollbarSize : 0)
|
|
||||||
options.top = 0
|
options.top = 0
|
||||||
options.bottom =
|
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||||
this.scrollHeight +
|
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||||
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
const height = 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.content.top / height) * this.boxHeight
|
||||||
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
|
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
|
||||||
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
|
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
|
||||||
@ -359,14 +345,9 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
: this.scrollbarWidth
|
: this.scrollbarWidth
|
||||||
if (this.isScrollbarVertical) {
|
if (this.isScrollbarVertical) {
|
||||||
this.scrollbar
|
this.scrollbar
|
||||||
.beginFill(
|
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
|
||||||
this.options.scrollbarBackground,
|
|
||||||
this.options.scrollbarBackgroundAlpha
|
|
||||||
)
|
|
||||||
.drawRect(
|
.drawRect(
|
||||||
this.boxWidth -
|
this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
|
||||||
this.scrollbarSize +
|
|
||||||
this.options.scrollbarOffsetVertical,
|
|
||||||
0,
|
0,
|
||||||
this.scrollbarSize,
|
this.scrollbarSize,
|
||||||
this.boxHeight
|
this.boxHeight
|
||||||
@ -375,15 +356,10 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
}
|
}
|
||||||
if (this.isScrollbarHorizontal) {
|
if (this.isScrollbarHorizontal) {
|
||||||
this.scrollbar
|
this.scrollbar
|
||||||
.beginFill(
|
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
|
||||||
this.options.scrollbarBackground,
|
|
||||||
this.options.scrollbarBackgroundAlpha
|
|
||||||
)
|
|
||||||
.drawRect(
|
.drawRect(
|
||||||
0,
|
0,
|
||||||
this.boxHeight -
|
this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
|
||||||
this.scrollbarSize +
|
|
||||||
this.options.scrollbarOffsetHorizontal,
|
|
||||||
this.boxWidth,
|
this.boxWidth,
|
||||||
this.scrollbarSize
|
this.scrollbarSize
|
||||||
)
|
)
|
||||||
@ -391,14 +367,9 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
}
|
}
|
||||||
if (this.isScrollbarVertical) {
|
if (this.isScrollbarVertical) {
|
||||||
this.scrollbar
|
this.scrollbar
|
||||||
.beginFill(
|
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
|
||||||
this.options.scrollbarForeground,
|
|
||||||
this.options.scrollbarForegroundAlpha
|
|
||||||
)
|
|
||||||
.drawRect(
|
.drawRect(
|
||||||
this.boxWidth -
|
this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
|
||||||
this.scrollbarSize +
|
|
||||||
this.options.scrollbarOffsetVertical,
|
|
||||||
this.scrollbarTop,
|
this.scrollbarTop,
|
||||||
this.scrollbarSize,
|
this.scrollbarSize,
|
||||||
this.scrollbarHeight
|
this.scrollbarHeight
|
||||||
@ -407,15 +378,10 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
}
|
}
|
||||||
if (this.isScrollbarHorizontal) {
|
if (this.isScrollbarHorizontal) {
|
||||||
this.scrollbar
|
this.scrollbar
|
||||||
.beginFill(
|
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
|
||||||
this.options.scrollbarForeground,
|
|
||||||
this.options.scrollbarForegroundAlpha
|
|
||||||
)
|
|
||||||
.drawRect(
|
.drawRect(
|
||||||
this.scrollbarLeft,
|
this.scrollbarLeft,
|
||||||
this.boxHeight -
|
this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
|
||||||
this.scrollbarSize +
|
|
||||||
this.options.scrollbarOffsetHorizontal,
|
|
||||||
this.scrollbarWidth,
|
this.scrollbarWidth,
|
||||||
this.scrollbarSize
|
this.scrollbarSize
|
||||||
)
|
)
|
||||||
@ -489,10 +455,7 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
const local = this.toLocal(e.data.global)
|
const local = this.toLocal(e.data.global)
|
||||||
if (this.isScrollbarHorizontal) {
|
if (this.isScrollbarHorizontal) {
|
||||||
if (local.y > this.boxHeight - this.scrollbarSize) {
|
if (local.y > this.boxHeight - this.scrollbarSize) {
|
||||||
if (
|
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth) {
|
||||||
local.x >= this.scrollbarLeft &&
|
|
||||||
local.x <= this.scrollbarLeft + this.scrollbarWidth
|
|
||||||
) {
|
|
||||||
this.pointerDown = { type: 'horizontal', last: local }
|
this.pointerDown = { type: 'horizontal', last: local }
|
||||||
} else {
|
} else {
|
||||||
if (local.x > this.scrollbarLeft) {
|
if (local.x > this.scrollbarLeft) {
|
||||||
@ -511,10 +474,7 @@ export default class Scrollbox extends PIXI.Container {
|
|||||||
}
|
}
|
||||||
if (this.isScrollbarVertical) {
|
if (this.isScrollbarVertical) {
|
||||||
if (local.x > this.boxWidth - this.scrollbarSize) {
|
if (local.x > this.boxWidth - this.scrollbarSize) {
|
||||||
if (
|
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth) {
|
||||||
local.y >= this.scrollbarTop &&
|
|
||||||
local.y <= this.scrollbarTop + this.scrollbarWidth
|
|
||||||
) {
|
|
||||||
this.pointerDown = { type: 'vertical', last: local }
|
this.pointerDown = { type: 'vertical', last: local }
|
||||||
} else {
|
} else {
|
||||||
if (local.y > this.scrollbarTop) {
|
if (local.y > this.scrollbarTop) {
|
||||||
@ -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)
|
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
|
||||||
*/
|
*/
|
||||||
resize(options) {
|
resize(options) {
|
||||||
this.options.boxWidth =
|
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
|
||||||
typeof options.boxWidth !== 'undefined'
|
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
|
||||||
? options.boxWidth
|
|
||||||
: this.options.boxWidth
|
|
||||||
this.options.boxHeight =
|
|
||||||
typeof options.boxHeight !== 'undefined'
|
|
||||||
? options.boxHeight
|
|
||||||
: this.options.boxHeight
|
|
||||||
if (options.scrollWidth) {
|
if (options.scrollWidth) {
|
||||||
this.scrollWidth = options.scrollWidth
|
this.scrollWidth = options.scrollWidth
|
||||||
}
|
}
|
||||||
if (options.scrollHeight) {
|
if (options.scrollHeight) {
|
||||||
this.scrollHeight = options.scrollHeight
|
this.scrollHeight = options.scrollHeight
|
||||||
}
|
}
|
||||||
this.content.resize(
|
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
|
||||||
this.options.boxWidth,
|
|
||||||
this.options.boxHeight,
|
|
||||||
this.scrollWidth,
|
|
||||||
this.scrollHeight
|
|
||||||
)
|
|
||||||
this.update()
|
this.update()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -176,12 +176,8 @@ export default class Slider extends PIXI.Container {
|
|||||||
|
|
||||||
this.on('pointermove', e => {
|
this.on('pointermove', e => {
|
||||||
if (this.control.dragging) {
|
if (this.control.dragging) {
|
||||||
const moveX = this.control.event.data.getLocalPosition(
|
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
|
||||||
this.control.parent
|
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
|
||||||
).x
|
|
||||||
this._value = this.pixelToValue(
|
|
||||||
moveX - this.control.delta - this.opts.controlRadius
|
|
||||||
)
|
|
||||||
let x = this.valueToPixel(this._value) + this.opts.controlRadius
|
let x = this.valueToPixel(this._value) + this.opts.controlRadius
|
||||||
this.control.x = x
|
this.control.x = x
|
||||||
|
|
||||||
@ -193,16 +189,8 @@ export default class Slider extends PIXI.Container {
|
|||||||
|
|
||||||
if (container instanceof Element) {
|
if (container instanceof Element) {
|
||||||
container.addEventListener('pointerup', e => this.onEnd(e), false)
|
container.addEventListener('pointerup', e => this.onEnd(e), false)
|
||||||
container.addEventListener(
|
container.addEventListener('pointercancel', e => this.onEnd(e), false)
|
||||||
'pointercancel',
|
container.addEventListener('pointerleave', e => this.onEnd(e), false)
|
||||||
e => this.onEnd(e),
|
|
||||||
false
|
|
||||||
)
|
|
||||||
container.addEventListener(
|
|
||||||
'pointerleave',
|
|
||||||
e => this.onEnd(e),
|
|
||||||
false
|
|
||||||
)
|
|
||||||
container.addEventListener('pointerout', e => this.onEnd(e), false)
|
container.addEventListener('pointerout', e => this.onEnd(e), false)
|
||||||
container.addEventListener('mouseup', e => this.onEnd(e), false)
|
container.addEventListener('mouseup', e => this.onEnd(e), false)
|
||||||
container.addEventListener('mousecancel', e => this.onEnd(e), false)
|
container.addEventListener('mousecancel', e => this.onEnd(e), false)
|
||||||
@ -263,9 +251,7 @@ export default class Slider extends PIXI.Container {
|
|||||||
if (this.sliderObj.pointerdowned) {
|
if (this.sliderObj.pointerdowned) {
|
||||||
this.sliderObj.pointerdowned = false
|
this.sliderObj.pointerdowned = false
|
||||||
const position = e.data.getLocalPosition(this.control.parent)
|
const position = e.data.getLocalPosition(this.control.parent)
|
||||||
this.value = this.pixelToValue(
|
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
|
||||||
position.x - this.opts.controlRadius
|
|
||||||
)
|
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
|
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.clear()
|
||||||
this.sliderObj.beginFill(0xffffff, 0)
|
this.sliderObj.beginFill(0xffffff, 0)
|
||||||
this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2)
|
this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2)
|
||||||
this.sliderObj.lineStyle(
|
this.sliderObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
this.sliderObj.moveTo(x, y)
|
this.sliderObj.moveTo(x, y)
|
||||||
this.sliderObj.lineTo(x + w, y)
|
this.sliderObj.lineTo(x + w, y)
|
||||||
@ -343,20 +325,10 @@ export default class Slider extends PIXI.Container {
|
|||||||
|
|
||||||
// Draw control
|
// Draw control
|
||||||
this.control.clear()
|
this.control.clear()
|
||||||
this.control.lineStyle(
|
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||||
this.opts.controlStrokeWidth,
|
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
|
||||||
this.opts.controlStroke,
|
|
||||||
this.opts.controlStrokeAlpha
|
|
||||||
)
|
|
||||||
this.control.beginFill(
|
|
||||||
this.opts.controlFill,
|
|
||||||
this.opts.controlFillAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, cr - 1)
|
this.control.drawCircle(0, 0, cr - 1)
|
||||||
this.control.beginFill(
|
this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||||
this.opts.controlStroke,
|
|
||||||
this.opts.controlStrokeAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, cr / 6)
|
this.control.drawCircle(0, 0, cr / 6)
|
||||||
this.control.endFill()
|
this.control.endFill()
|
||||||
|
|
||||||
@ -394,10 +366,7 @@ export default class Slider extends PIXI.Container {
|
|||||||
} else if (value > this.opts.max) {
|
} else if (value > this.opts.max) {
|
||||||
value = this.opts.max
|
value = this.opts.max
|
||||||
}
|
}
|
||||||
return (
|
return (this.opts.width * (value - this.opts.min)) / (this.opts.max - this.opts.min)
|
||||||
(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) {
|
} else if (pixel > this.opts.width) {
|
||||||
pixel = this.opts.width
|
pixel = this.opts.width
|
||||||
}
|
}
|
||||||
return (
|
return this.opts.min + ((this.opts.max - this.opts.min) * pixel) / this.opts.width
|
||||||
this.opts.min +
|
|
||||||
((this.opts.max - this.opts.min) * pixel) / this.opts.width
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -119,10 +119,7 @@ export default class Stylus extends PIXI.Graphics {
|
|||||||
let identifier = event.data.identifier
|
let identifier = event.data.identifier
|
||||||
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
|
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
|
||||||
for (let touch of event.data.originalEvent.changedTouches) {
|
for (let touch of event.data.originalEvent.changedTouches) {
|
||||||
if (
|
if (touch.identifier === identifier && touch.touchType === 'stylus') {
|
||||||
touch.identifier === identifier &&
|
|
||||||
touch.touchType === 'stylus'
|
|
||||||
) {
|
|
||||||
this.tiltX = Angle.radian2degree(touch.azimuthAngle)
|
this.tiltX = Angle.radian2degree(touch.azimuthAngle)
|
||||||
this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle)
|
this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle)
|
||||||
return true
|
return true
|
||||||
@ -142,10 +139,7 @@ export default class Stylus extends PIXI.Graphics {
|
|||||||
let identifier = event.data.identifier
|
let identifier = event.data.identifier
|
||||||
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
|
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
|
||||||
for (let touch of event.data.originalEvent.changedTouches) {
|
for (let touch of event.data.originalEvent.changedTouches) {
|
||||||
if (
|
if (touch.identifier === identifier && touch.pointerType === 'touch') {
|
||||||
touch.identifier === identifier &&
|
|
||||||
touch.pointerType === 'touch'
|
|
||||||
) {
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -182,8 +176,7 @@ export default class Stylus extends PIXI.Graphics {
|
|||||||
this.tiltY += 5
|
this.tiltY += 5
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
if (this.debug)
|
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
|
||||||
console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
this.on('pointerdown', e => {
|
this.on('pointerdown', e => {
|
||||||
@ -197,15 +190,9 @@ export default class Stylus extends PIXI.Graphics {
|
|||||||
})
|
})
|
||||||
|
|
||||||
this.on('pointermove', e => {
|
this.on('pointermove', e => {
|
||||||
if (
|
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
|
||||||
Events.isPointerDown(e.data.originalEvent) ||
|
if (this.debug) console.log('pointermove', e, this.eventInside(e))
|
||||||
this.isStylusPointer(e) ||
|
if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e))
|
||||||
this.isStylusTouch(e)
|
|
||||||
) {
|
|
||||||
if (this.debug)
|
|
||||||
console.log('pointermove', e, this.eventInside(e))
|
|
||||||
if (this.eventInside(e) && this.singlePointer())
|
|
||||||
this.moveStroke(this.toStroke(e))
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.on('pointerup', e => {
|
this.on('pointerup', e => {
|
||||||
@ -320,11 +307,7 @@ export default class Stylus extends PIXI.Graphics {
|
|||||||
this.moveTo(start.x, start.y)
|
this.moveTo(start.x, start.y)
|
||||||
for (let i = 1; i < stroke.length; i++) {
|
for (let i = 1; i < stroke.length; i++) {
|
||||||
let info = stroke[i]
|
let info = stroke[i]
|
||||||
this.lineStyle(
|
this.lineStyle(this.tiltToLineWidth(info.tiltY), info.color, this.colorAlpha)
|
||||||
this.tiltToLineWidth(info.tiltY),
|
|
||||||
info.color,
|
|
||||||
this.colorAlpha
|
|
||||||
)
|
|
||||||
this.lineTo(info.x, info.y)
|
this.lineTo(info.x, info.y)
|
||||||
}
|
}
|
||||||
this.endFill()
|
this.endFill()
|
||||||
|
|||||||
@ -152,10 +152,8 @@ export default class Switch extends PIXI.Container {
|
|||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
|
||||||
this.opts.controlRadius =
|
this.opts.controlRadius = this.opts.controlRadius || this.opts.height / 2
|
||||||
this.opts.controlRadius || this.opts.height / 2
|
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
|
||||||
this.opts.controlRadiusActive =
|
|
||||||
this.opts.controlRadiusActive || this.opts.controlRadius
|
|
||||||
|
|
||||||
// Validation
|
// Validation
|
||||||
//-----------------
|
//-----------------
|
||||||
@ -317,32 +315,15 @@ export default class Switch extends PIXI.Container {
|
|||||||
draw() {
|
draw() {
|
||||||
this.switchObj.clear()
|
this.switchObj.clear()
|
||||||
if (this.active) {
|
if (this.active) {
|
||||||
this.switchObj.lineStyle(
|
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||||
this.opts.strokeActiveWidth,
|
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||||
this.opts.strokeActive,
|
|
||||||
this.opts.strokeActiveAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.beginFill(
|
|
||||||
this.opts.fillActive,
|
|
||||||
this.opts.fillActiveAlpha
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
this.switchObj.lineStyle(
|
this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
this.opts.strokeWidth,
|
|
||||||
this.opts.stroke,
|
|
||||||
this.opts.strokeAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||||
}
|
}
|
||||||
this.switchObj.moveTo(this.radius, 0)
|
this.switchObj.moveTo(this.radius, 0)
|
||||||
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
|
||||||
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.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(
|
||||||
this.opts.width,
|
this.opts.width,
|
||||||
@ -364,21 +345,11 @@ export default class Switch extends PIXI.Container {
|
|||||||
this.opts.controlStrokeActive,
|
this.opts.controlStrokeActive,
|
||||||
this.opts.controlStrokeActiveAlpha
|
this.opts.controlStrokeActiveAlpha
|
||||||
)
|
)
|
||||||
this.control.beginFill(
|
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
|
||||||
this.opts.controlFillActive,
|
|
||||||
this.opts.controlFillActiveAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
|
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
|
||||||
} else {
|
} else {
|
||||||
this.control.lineStyle(
|
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||||
this.opts.controlStrokeWidth,
|
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
|
||||||
this.opts.controlStroke,
|
|
||||||
this.opts.controlStrokeAlpha
|
|
||||||
)
|
|
||||||
this.control.beginFill(
|
|
||||||
this.opts.controlFill,
|
|
||||||
this.opts.controlFillAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
|
this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
|
||||||
}
|
}
|
||||||
this.control.endFill()
|
this.control.endFill()
|
||||||
@ -394,24 +365,11 @@ export default class Switch extends PIXI.Container {
|
|||||||
*/
|
*/
|
||||||
drawAnimated() {
|
drawAnimated() {
|
||||||
this.switchObj.clear()
|
this.switchObj.clear()
|
||||||
this.switchObj.lineStyle(
|
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
|
||||||
this.tempAnimated.strokeWidth,
|
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
|
||||||
this.tempAnimated.stroke,
|
|
||||||
this.tempAnimated.strokeAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.beginFill(
|
|
||||||
this.tempAnimated.fill,
|
|
||||||
this.tempAnimated.fillAlpha
|
|
||||||
)
|
|
||||||
this.switchObj.moveTo(this.radius, 0)
|
this.switchObj.moveTo(this.radius, 0)
|
||||||
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
this.switchObj.lineTo(this.opts.width - this.radius, 0)
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
|
||||||
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.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
|
||||||
this.switchObj.arcTo(
|
this.switchObj.arcTo(
|
||||||
this.opts.width,
|
this.opts.width,
|
||||||
@ -431,10 +389,7 @@ export default class Switch extends PIXI.Container {
|
|||||||
this.tempAnimated.controlStroke,
|
this.tempAnimated.controlStroke,
|
||||||
this.tempAnimated.controlStrokeAlpha
|
this.tempAnimated.controlStrokeAlpha
|
||||||
)
|
)
|
||||||
this.control.beginFill(
|
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
|
||||||
this.tempAnimated.controlFill,
|
|
||||||
this.tempAnimated.controlFillAlpha
|
|
||||||
)
|
|
||||||
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
|
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
|
||||||
this.control.endFill()
|
this.control.endFill()
|
||||||
|
|
||||||
|
|||||||
@ -131,21 +131,9 @@ export class RecorderTools extends PIXI.Container {
|
|||||||
|
|
||||||
setupToolbar() {
|
setupToolbar() {
|
||||||
this.toolbar = new PIXI.Graphics()
|
this.toolbar = new PIXI.Graphics()
|
||||||
this.record = new RecordCommand(
|
this.record = new RecordCommand(this, 0xcc0000, new PIXI.Circle(0, 0, 16))
|
||||||
this,
|
this.play = new PlayCommand(this, 0x0000cc, new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16))
|
||||||
0xcc0000,
|
this.stop = new StopCommand(this, 0x0000cc, new PIXI.Rectangle(0, 0, 32, 32))
|
||||||
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.record).position.set(44, 48)
|
||||||
this.toolbar.addChild(this.play).position.set(44 + 44, 16)
|
this.toolbar.addChild(this.play).position.set(44 + 44, 16)
|
||||||
this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32)
|
this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32)
|
||||||
@ -183,11 +171,7 @@ export class RecorderTools extends PIXI.Container {
|
|||||||
|
|
||||||
mapPositionToPoint(point) {
|
mapPositionToPoint(point) {
|
||||||
let local = new PIXI.Point()
|
let local = new PIXI.Point()
|
||||||
this.renderer.plugins.interaction.mapPositionToPoint(
|
this.renderer.plugins.interaction.mapPositionToPoint(local, point.x, point.y)
|
||||||
local,
|
|
||||||
point.x,
|
|
||||||
point.y
|
|
||||||
)
|
|
||||||
return local
|
return local
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -120,3 +120,4 @@ app.scene.addChild(switchDark, switchLight, switchRed)
|
|||||||
app.scene.addChild(buttonYellow)
|
app.scene.addChild(buttonYellow)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
@ -80,8 +80,7 @@ export default class Theme {
|
|||||||
* is used for large actived text.
|
* is used for large actived text.
|
||||||
*/
|
*/
|
||||||
constructor(opts = {}) {
|
constructor(opts = {}) {
|
||||||
const colorPrimary =
|
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
|
||||||
opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
|
|
||||||
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
|
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
|
||||||
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
|
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
import { Cycle, Colors, Dates, isEmpty } from '../utils.js'
|
import { Cycle, Colors, Dates, isEmpty } from '../utils.js'
|
||||||
import { Capabilities } from '../capabilities.js'
|
import { Capabilities } from '../capabilities.js'
|
||||||
import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js'
|
import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js'
|
||||||
@ -89,24 +90,13 @@ export class Ticks {
|
|||||||
return date.toLocaleDateString('de', format)
|
return date.toLocaleDateString('de', format)
|
||||||
}
|
}
|
||||||
|
|
||||||
draw(
|
draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks = false) {
|
||||||
timeline,
|
|
||||||
range,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
available,
|
|
||||||
format,
|
|
||||||
nextFormat,
|
|
||||||
level,
|
|
||||||
extraTicks = false
|
|
||||||
) {
|
|
||||||
let first = null
|
let first = null
|
||||||
let last = null
|
let last = null
|
||||||
let keyedFormat = format ? format[this.formatKey] : null
|
let keyedFormat = format ? format[this.formatKey] : null
|
||||||
let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null
|
let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null
|
||||||
let redundant = nextFormat ? this.formatKey in nextFormat : false
|
let redundant = nextFormat ? this.formatKey in nextFormat : false
|
||||||
let fullyRedundant =
|
let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat
|
||||||
keyedFormat != null && keyedFormat == keyedNextFormat
|
|
||||||
let y = timeline.getY()
|
let y = timeline.getY()
|
||||||
for (let { start, end } of this.iterRanges(range)) {
|
for (let { start, end } of this.iterRanges(range)) {
|
||||||
let x = timeline.toX(start)
|
let x = timeline.toX(start)
|
||||||
@ -131,12 +121,7 @@ export class Ticks {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!fullyRedundant) {
|
if (!fullyRedundant) {
|
||||||
timeline.ensureLabel(
|
timeline.ensureLabel(key, text, { x: xx, y: yy, align }, FontInfo.small)
|
||||||
key,
|
|
||||||
text,
|
|
||||||
{ x: xx, y: yy, align },
|
|
||||||
FontInfo.small
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
if (extraTicks) timeline.drawTick(x, -level)
|
if (extraTicks) timeline.drawTick(x, -level)
|
||||||
}
|
}
|
||||||
@ -286,11 +271,7 @@ export class DayTicks extends Ticks {
|
|||||||
}
|
}
|
||||||
|
|
||||||
iterStart(start) {
|
iterStart(start) {
|
||||||
return Dates.create(
|
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate())
|
||||||
start.getFullYear(),
|
|
||||||
start.getMonth(),
|
|
||||||
start.getDate()
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
next(date) {
|
next(date) {
|
||||||
@ -331,22 +312,11 @@ export class HourTicks extends Ticks {
|
|||||||
}
|
}
|
||||||
|
|
||||||
dateKey(date) {
|
dateKey(date) {
|
||||||
return (
|
return this.key + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours()
|
||||||
this.key +
|
|
||||||
date.getFullYear() +
|
|
||||||
date.getMonth() +
|
|
||||||
date.getDate() +
|
|
||||||
date.getHours()
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
iterStart(start) {
|
iterStart(start) {
|
||||||
return Dates.create(
|
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours())
|
||||||
start.getFullYear(),
|
|
||||||
start.getMonth(),
|
|
||||||
start.getDate(),
|
|
||||||
start.getHours()
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
next(date) {
|
next(date) {
|
||||||
@ -388,14 +358,7 @@ export class MinuteTicks extends Ticks {
|
|||||||
}
|
}
|
||||||
|
|
||||||
dateKey(date) {
|
dateKey(date) {
|
||||||
return (
|
return this.key + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes()
|
||||||
this.key +
|
|
||||||
date.getFullYear() +
|
|
||||||
date.getMonth() +
|
|
||||||
date.getDate() +
|
|
||||||
date.getHours() +
|
|
||||||
date.getMinutes()
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
iterStart(start) {
|
iterStart(start) {
|
||||||
@ -450,10 +413,7 @@ export class TimeTicks {
|
|||||||
let available = amount * size
|
let available = amount * size
|
||||||
availables.set(ticks, available)
|
availables.set(ticks, available)
|
||||||
if (available < ticks.minWidth) break
|
if (available < ticks.minWidth) break
|
||||||
formats.set(
|
formats.set(ticks, available < ticks.minLabelWidth ? null : ticks.format(available))
|
||||||
ticks,
|
|
||||||
available < ticks.minLabelWidth ? null : ticks.format(available)
|
|
||||||
)
|
|
||||||
nextFormats.set(previous, formats.get(ticks))
|
nextFormats.set(previous, formats.get(ticks))
|
||||||
previous = ticks
|
previous = ticks
|
||||||
visible.push(ticks)
|
visible.push(ticks)
|
||||||
@ -522,16 +482,7 @@ export class ColorRanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default class Timeline extends BitmapLabeledGraphics {
|
export default class Timeline extends BitmapLabeledGraphics {
|
||||||
constructor(
|
constructor(width, height, { ticks = null, baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
|
||||||
width,
|
|
||||||
height,
|
|
||||||
{
|
|
||||||
ticks = null,
|
|
||||||
baseLine = 0.5,
|
|
||||||
showRange = true,
|
|
||||||
throwDamping = 0.95
|
|
||||||
} = {}
|
|
||||||
) {
|
|
||||||
super()
|
super()
|
||||||
this.wantedWidth = width
|
this.wantedWidth = width
|
||||||
this.wantedHeight = height
|
this.wantedHeight = height
|
||||||
@ -545,15 +496,11 @@ export default class Timeline extends BitmapLabeledGraphics {
|
|||||||
this.minZoom = 1
|
this.minZoom = 1
|
||||||
this.maxZoom = 12000
|
this.maxZoom = 12000
|
||||||
this.scroll = 0
|
this.scroll = 0
|
||||||
|
this.draggable = false
|
||||||
this.deltas = []
|
this.deltas = []
|
||||||
this.labelDates = []
|
this.labelDates = []
|
||||||
this.colorRanges = []
|
this.colorRanges = []
|
||||||
this.rangeColors = new Cycle(
|
this.rangeColors = new Cycle(Colors.eminence, Colors.steelblue, Colors.ochre, Colors.turquoise)
|
||||||
Colors.eminence,
|
|
||||||
Colors.steelblue,
|
|
||||||
Colors.ochre,
|
|
||||||
Colors.turquoise
|
|
||||||
)
|
|
||||||
this.callbacks = []
|
this.callbacks = []
|
||||||
this.onTapCallbacks = []
|
this.onTapCallbacks = []
|
||||||
this.onDoubleTapCallbacks = []
|
this.onDoubleTapCallbacks = []
|
||||||
@ -565,14 +512,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
|||||||
this.autoScroll = false
|
this.autoScroll = false
|
||||||
this.direction = -1
|
this.direction = -1
|
||||||
this.throwDamping = throwDamping
|
this.throwDamping = throwDamping
|
||||||
this.timeticks =
|
this.timeticks = ticks || new TimeTicks(new DecadeTicks(), new YearTicks(), new MonthTicks(), new DayTicks())
|
||||||
ticks ||
|
|
||||||
new TimeTicks(
|
|
||||||
new DecadeTicks(),
|
|
||||||
new YearTicks(),
|
|
||||||
new MonthTicks(),
|
|
||||||
new DayTicks()
|
|
||||||
)
|
|
||||||
this.labelPrefix = '__'
|
this.labelPrefix = '__'
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -729,8 +669,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
|||||||
|
|
||||||
prepareLabels() {
|
prepareLabels() {
|
||||||
for (let key of this.labels.keys()) {
|
for (let key of this.labels.keys()) {
|
||||||
if (!key.startsWith(this.labelPrefix))
|
if (!key.startsWith(this.labelPrefix)) this.labels.get(key).visible = false
|
||||||
this.labels.get(key).visible = false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -824,9 +763,9 @@ export default class Timeline extends BitmapLabeledGraphics {
|
|||||||
this.killTweens()
|
this.killTweens()
|
||||||
this.deltas = []
|
this.deltas = []
|
||||||
this.validScroll()
|
this.validScroll()
|
||||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
// if (typeof ThrowPropsPlugin != 'undefined') {
|
||||||
ThrowPropsPlugin.track(this, 'delta')
|
// ThrowPropsPlugin.track(this, 'delta')
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
onMove(event, interaction) {
|
onMove(event, interaction) {
|
||||||
@ -835,6 +774,9 @@ export default class Timeline extends BitmapLabeledGraphics {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.scroll += delta.x
|
this.scroll += delta.x
|
||||||
|
if (this.draggable) {
|
||||||
|
this.y += delta.y
|
||||||
|
}
|
||||||
while (this.deltas.length > 10) {
|
while (this.deltas.length > 10) {
|
||||||
this.deltas.pop(0)
|
this.deltas.pop(0)
|
||||||
}
|
}
|
||||||
@ -846,11 +788,10 @@ export default class Timeline extends BitmapLabeledGraphics {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onEnd(event, interaction) {
|
onEnd(event, interaction) {
|
||||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
// if (typeof ThrowPropsPlugin != 'undefined') {
|
||||||
let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
|
// let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
|
||||||
ThrowPropsPlugin.untrack(this)
|
// ThrowPropsPlugin.untrack(this)
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.killTweens()
|
this.killTweens()
|
||||||
this.redraw()
|
this.redraw()
|
||||||
let delta = 0
|
let delta = 0
|
||||||
@ -863,7 +804,6 @@ export default class Timeline extends BitmapLabeledGraphics {
|
|||||||
this.autoScroll = true
|
this.autoScroll = true
|
||||||
let anchor = interaction.current.mean()
|
let anchor = interaction.current.mean()
|
||||||
this.keepInBounds(delta, anchor)
|
this.keepInBounds(delta, anchor)
|
||||||
|
|
||||||
for (let key of interaction.ended.keys()) {
|
for (let key of interaction.ended.keys()) {
|
||||||
if (interaction.isDoubleTap(key)) {
|
if (interaction.isDoubleTap(key)) {
|
||||||
this.onDoubleTap(event, interaction, key)
|
this.onDoubleTap(event, interaction, key)
|
||||||
|
|||||||
60
lib/popup.js
60
lib/popup.js
@ -1,3 +1,6 @@
|
|||||||
|
/* eslint-disable no-console */
|
||||||
|
/* eslint-disable no-case-declarations */
|
||||||
|
/* eslint-disable no-unused-vars */
|
||||||
import { Elements } from './utils.js'
|
import { Elements } from './utils.js'
|
||||||
import Poppable from './poppable.js'
|
import Poppable from './poppable.js'
|
||||||
|
|
||||||
@ -147,8 +150,7 @@ export default class Popup extends Poppable {
|
|||||||
img.ondrag = e => {
|
img.ondrag = e => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
let target =
|
let target = this.element.querySelector('iframe') || this.element
|
||||||
this.element.querySelector('iframe') || this.element
|
|
||||||
let delta = {
|
let delta = {
|
||||||
x: e.clientX - this.currentPos.x,
|
x: e.clientX - this.currentPos.x,
|
||||||
y: e.clientY - this.currentPos.y
|
y: e.clientY - this.currentPos.y
|
||||||
@ -182,6 +184,7 @@ export default class Popup extends Poppable {
|
|||||||
}
|
}
|
||||||
|
|
||||||
for (let key in content) {
|
for (let key in content) {
|
||||||
|
console.log('using', key, this.loaded)
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'selector':
|
case 'selector':
|
||||||
break
|
break
|
||||||
@ -250,10 +253,7 @@ export default class Popup extends Poppable {
|
|||||||
if (images.length > 0) {
|
if (images.length > 0) {
|
||||||
let count = 0
|
let count = 0
|
||||||
for (let image of images) {
|
for (let image of images) {
|
||||||
if (
|
if (!image.complete && !image.src.startsWith('data:')) {
|
||||||
!image.complete &&
|
|
||||||
!image.src.startsWith('data:')
|
|
||||||
) {
|
|
||||||
total += 1
|
total += 1
|
||||||
console.log('image not complete', image.src)
|
console.log('image not complete', image.src)
|
||||||
image.onload = e => {
|
image.onload = e => {
|
||||||
@ -293,7 +293,7 @@ export default class Popup extends Poppable {
|
|||||||
handleClose(e) {
|
handleClose(e) {
|
||||||
let closing = this.closingEvent(e)
|
let closing = this.closingEvent(e)
|
||||||
if (closing) {
|
if (closing) {
|
||||||
this.close()
|
this.close(e)
|
||||||
} else {
|
} else {
|
||||||
this.setupCloseHandler()
|
this.setupCloseHandler()
|
||||||
}
|
}
|
||||||
@ -365,8 +365,7 @@ export default class Popup extends Poppable {
|
|||||||
target.ondragstart = e => {
|
target.ondragstart = e => {
|
||||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||||
var img = document.createElement('img')
|
var img = document.createElement('img')
|
||||||
img.src =
|
img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||||
'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
|
||||||
e.dataTransfer.setDragImage(img, 0, 0)
|
e.dataTransfer.setDragImage(img, 0, 0)
|
||||||
}
|
}
|
||||||
target.ondrag = e => {
|
target.ondrag = e => {
|
||||||
@ -416,18 +415,17 @@ export default class Popup extends Poppable {
|
|||||||
layout() {}
|
layout() {}
|
||||||
|
|
||||||
remove() {
|
remove() {
|
||||||
if (this.parent.contains(this.element))
|
if (this.parent.contains(this.element)) this.parent.removeChild(this.element)
|
||||||
this.parent.removeChild(this.element)
|
|
||||||
this.unregister(this.context)
|
this.unregister(this.context)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Close and remove the Popup from the DOM tree.
|
/** Close and remove the Popup from the DOM tree.
|
||||||
*/
|
*/
|
||||||
close() {
|
close(event) {
|
||||||
//console.log("Popup.close", this.closeCommand)
|
//console.log("Popup.close", this.closeCommand)
|
||||||
this.unregister(this.context)
|
this.unregister(this.context)
|
||||||
if (this.closeCommand) {
|
if (this.closeCommand) {
|
||||||
this.closeCommand(this, () => this.remove())
|
this.closeCommand(this, () => this.remove(), event)
|
||||||
} else {
|
} else {
|
||||||
this.remove()
|
this.remove()
|
||||||
}
|
}
|
||||||
@ -572,36 +570,30 @@ export default class Popup extends Poppable {
|
|||||||
//if targetBoundingBox is set, popup is placed next to the rectangle
|
//if targetBoundingBox is set, popup is placed next to the rectangle
|
||||||
if (this.targetBoundingBox) {
|
if (this.targetBoundingBox) {
|
||||||
let bbTop = this.targetBoundingBox.y
|
let bbTop = this.targetBoundingBox.y
|
||||||
let bbBottom =
|
let bbBottom = this.targetBoundingBox.y + this.targetBoundingBox.height
|
||||||
this.targetBoundingBox.y + this.targetBoundingBox.height
|
|
||||||
let bbLeft = this.targetBoundingBox.x
|
let bbLeft = this.targetBoundingBox.x
|
||||||
let bbRight =
|
let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width
|
||||||
this.targetBoundingBox.x + this.targetBoundingBox.width
|
|
||||||
//console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight)
|
//console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight)
|
||||||
switch (notchPosition) {
|
switch (notchPosition) {
|
||||||
case 'bottomLeft':
|
case 'bottomLeft':
|
||||||
case 'bottomRight':
|
case 'bottomRight':
|
||||||
case 'bottomCenter':
|
case 'bottomCenter':
|
||||||
y = bbTop
|
y = bbTop
|
||||||
if (!this.useEventPosWithBoundingBox)
|
if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
|
||||||
x = (bbLeft + bbRight) / 2
|
|
||||||
break
|
break
|
||||||
case 'topLeft':
|
case 'topLeft':
|
||||||
case 'topRight':
|
case 'topRight':
|
||||||
case 'topCenter':
|
case 'topCenter':
|
||||||
y = bbBottom
|
y = bbBottom
|
||||||
if (!this.useEventPosWithBoundingBox)
|
if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
|
||||||
x = (bbLeft + bbRight) / 2
|
|
||||||
break
|
break
|
||||||
case 'centerRight':
|
case 'centerRight':
|
||||||
x = bbLeft
|
x = bbLeft
|
||||||
if (!this.useEventPosWithBoundingBox)
|
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
|
||||||
y = (bbTop + bbBottom) / 2
|
|
||||||
break
|
break
|
||||||
case 'centerLeft':
|
case 'centerLeft':
|
||||||
x = bbRight
|
x = bbRight
|
||||||
if (!this.useEventPosWithBoundingBox)
|
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
|
||||||
y = (bbTop + bbBottom) / 2
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
break
|
break
|
||||||
@ -747,8 +739,7 @@ export default class Popup extends Poppable {
|
|||||||
boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
|
boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
|
||||||
bottom: -this.notchSize + 'px',
|
bottom: -this.notchSize + 'px',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
borderTop:
|
borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
|
||||||
this.notchSize + 'px solid ' + this.backgroundColor,
|
|
||||||
borderRight: this.notchSize + 'px solid transparent',
|
borderRight: this.notchSize + 'px solid transparent',
|
||||||
borderLeft: this.notchSize + 'px solid transparent',
|
borderLeft: this.notchSize + 'px solid transparent',
|
||||||
borderBottom: 0
|
borderBottom: 0
|
||||||
@ -776,8 +767,7 @@ export default class Popup extends Poppable {
|
|||||||
left,
|
left,
|
||||||
top: -this.notchSize + 'px',
|
top: -this.notchSize + 'px',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
borderBottom:
|
borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
|
||||||
this.notchSize + 'px solid ' + this.backgroundColor,
|
|
||||||
borderRight: this.notchSize + 'px solid transparent',
|
borderRight: this.notchSize + 'px solid transparent',
|
||||||
borderLeft: this.notchSize + 'px solid transparent',
|
borderLeft: this.notchSize + 'px solid transparent',
|
||||||
borderTop: 0
|
borderTop: 0
|
||||||
@ -814,16 +804,13 @@ export default class Popup extends Poppable {
|
|||||||
let top = size.height / 2 - this.notchSize
|
let top = size.height / 2 - this.notchSize
|
||||||
if (notchPosition.endsWith('Left')) {
|
if (notchPosition.endsWith('Left')) {
|
||||||
left = -this.notchSize * 2 + 'px'
|
left = -this.notchSize * 2 + 'px'
|
||||||
borderRight =
|
borderRight = this.notchSize + 'px solid ' + this.backgroundColor
|
||||||
this.notchSize + 'px solid ' + this.backgroundColor
|
this.element.style.boxShadow = '15px 10px 15px rgba(0, 0, 0, 0.3)'
|
||||||
this.element.style.boxShadow =
|
|
||||||
'15px 10px 15px rgba(0, 0, 0, 0.3)'
|
|
||||||
}
|
}
|
||||||
if (notchPosition.endsWith('Right')) {
|
if (notchPosition.endsWith('Right')) {
|
||||||
left = size.width + 'px'
|
left = size.width + 'px'
|
||||||
borderLeft = this.notchSize + 'px solid ' + this.backgroundColor
|
borderLeft = this.notchSize + 'px solid ' + this.backgroundColor
|
||||||
this.element.style.boxShadow =
|
this.element.style.boxShadow = '15px 5px 15px rgba(0, 0, 0, 0.3)'
|
||||||
'15px 5px 15px rgba(0, 0, 0, 0.3)'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
top = Math.round(top) + 'px'
|
top = Math.round(top) + 'px'
|
||||||
@ -880,8 +867,7 @@ export default class Popup extends Poppable {
|
|||||||
onMove = null
|
onMove = null
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
let notchPosition =
|
let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
|
||||||
switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
|
|
||||||
let popup = new Popup({
|
let popup = new Popup({
|
||||||
parent,
|
parent,
|
||||||
context,
|
context,
|
||||||
|
|||||||
@ -195,8 +195,7 @@ export default class PopupMenu extends Popup {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
console.log('open', point)
|
console.log('open', point)
|
||||||
let notchPosition =
|
let notchPosition = point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
|
||||||
point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
|
|
||||||
let popup = new PopupMenu({
|
let popup = new PopupMenu({
|
||||||
parent,
|
parent,
|
||||||
fontSize,
|
fontSize,
|
||||||
@ -219,21 +218,9 @@ export default class PopupMenu extends Popup {
|
|||||||
if (this.eventOutside(e)) this.closePopup(context)
|
if (this.eventOutside(e)) this.closePopup(context)
|
||||||
}
|
}
|
||||||
if (autoClose) {
|
if (autoClose) {
|
||||||
context.addEventListener(
|
context.addEventListener('mousedown', popup.closeEventListener, true)
|
||||||
'mousedown',
|
context.addEventListener('touchstart', popup.closeEventListener, true)
|
||||||
popup.closeEventListener,
|
context.addEventListener('pointerdown', popup.closeEventListener, true)
|
||||||
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)
|
let registered = Poppable.get(context)
|
||||||
if (registered) {
|
if (registered) {
|
||||||
registered.close()
|
registered.close()
|
||||||
context.removeEventListener(
|
context.removeEventListener('mousedown', registered.closeEventListener)
|
||||||
'mousedown',
|
context.removeEventListener('touchstart', registered.closeEventListener)
|
||||||
registered.closeEventListener
|
context.removeEventListener('pointerdown', registered.closeEventListener)
|
||||||
)
|
|
||||||
context.removeEventListener(
|
|
||||||
'touchstart',
|
|
||||||
registered.closeEventListener
|
|
||||||
)
|
|
||||||
context.removeEventListener(
|
|
||||||
'pointerdown',
|
|
||||||
registered.closeEventListener
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
110
lib/scatter.js
110
lib/scatter.js
@ -1,6 +1,6 @@
|
|||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
/* eslint-disable no-console */
|
/* eslint-disable no-console */
|
||||||
/* globals TweenLite debugCanvas */
|
/* globals debugCanvas */
|
||||||
import Interface from './interface.js'
|
import Interface from './interface.js'
|
||||||
import { Points, Polygon, Angle, Elements, LowPassFilter } from './utils.js'
|
import { Points, Polygon, Angle, Elements, LowPassFilter } from './utils.js'
|
||||||
import Events from './events.js'
|
import Events from './events.js'
|
||||||
@ -45,14 +45,7 @@ const END = 'onEnd'
|
|||||||
export class ScatterEvent extends BaseEvent {
|
export class ScatterEvent extends BaseEvent {
|
||||||
constructor(
|
constructor(
|
||||||
target,
|
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 })
|
super('scatterTransformed', { target: target })
|
||||||
this.translate = translate
|
this.translate = translate
|
||||||
@ -65,13 +58,7 @@ export class ScatterEvent extends BaseEvent {
|
|||||||
|
|
||||||
toString() {
|
toString() {
|
||||||
return (
|
return (
|
||||||
"Event('scatterTransformed', scale: " +
|
"Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')'
|
||||||
this.scale +
|
|
||||||
' about: ' +
|
|
||||||
this.about.x +
|
|
||||||
', ' +
|
|
||||||
this.about.y +
|
|
||||||
')'
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -91,13 +78,7 @@ export class ResizeEvent extends BaseEvent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
toString() {
|
toString() {
|
||||||
return (
|
return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')'
|
||||||
'Event(scatterResized width: ' +
|
|
||||||
this.width +
|
|
||||||
'height: ' +
|
|
||||||
this.height +
|
|
||||||
')'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -386,9 +367,7 @@ export class AbstractScatter extends Throwable {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_removeSelfFromScatterContainer() {
|
_removeSelfFromScatterContainer() {
|
||||||
/**
|
// Removes self from container when it's closed.
|
||||||
Removes self from container when it's closed.
|
|
||||||
*/
|
|
||||||
if (this.container) {
|
if (this.container) {
|
||||||
this.container.remove(this)
|
this.container.remove(this)
|
||||||
}
|
}
|
||||||
@ -524,10 +503,7 @@ export class AbstractScatter extends Throwable {
|
|||||||
|
|
||||||
_checkAutoClose() {
|
_checkAutoClose() {
|
||||||
if (this.scaleAutoClose)
|
if (this.scaleAutoClose)
|
||||||
if (
|
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
|
||||||
this.scale <
|
|
||||||
this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
|
|
||||||
) {
|
|
||||||
this.zoom(this.minScale, {
|
this.zoom(this.minScale, {
|
||||||
animate: 0.2,
|
animate: 0.2,
|
||||||
onComplete: this.close.bind(this)
|
onComplete: this.close.bind(this)
|
||||||
@ -582,17 +558,7 @@ export class AbstractScatter extends Throwable {
|
|||||||
this.move(delta, { animate: animate })
|
this.move(delta, { animate: animate })
|
||||||
}
|
}
|
||||||
|
|
||||||
zoom(
|
zoom(scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {}) {
|
||||||
scale,
|
|
||||||
{
|
|
||||||
animate = 0,
|
|
||||||
about = null,
|
|
||||||
delay = 0,
|
|
||||||
x = null,
|
|
||||||
y = null,
|
|
||||||
onComplete = null
|
|
||||||
} = {}
|
|
||||||
) {
|
|
||||||
let anchor = about || this.center
|
let anchor = about || this.center
|
||||||
if (scale != this.scale) {
|
if (scale != this.scale) {
|
||||||
if (animate > 0) {
|
if (animate > 0) {
|
||||||
@ -643,15 +609,9 @@ export class AbstractScatter extends Throwable {
|
|||||||
let origin = this.rotationOrigin
|
let origin = this.rotationOrigin
|
||||||
let beta = Points.angle(origin, anchor)
|
let beta = Points.angle(origin, anchor)
|
||||||
let distance = Points.distance(origin, anchor)
|
let distance = Points.distance(origin, anchor)
|
||||||
let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(
|
let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom)
|
||||||
zoom
|
|
||||||
)
|
|
||||||
|
|
||||||
let newOrigin = Points.arc(
|
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
|
||||||
anchor,
|
|
||||||
beta + rotate,
|
|
||||||
distance * thresholdedZoom
|
|
||||||
)
|
|
||||||
let extra = Points.subtract(newOrigin, origin)
|
let extra = Points.subtract(newOrigin, origin)
|
||||||
let offset = Points.subtract(anchor, origin)
|
let offset = Points.subtract(anchor, origin)
|
||||||
this._move(offset)
|
this._move(offset)
|
||||||
@ -714,10 +674,8 @@ export class AbstractScatter extends Throwable {
|
|||||||
}
|
}
|
||||||
|
|
||||||
calculateScaleTransparency() {
|
calculateScaleTransparency() {
|
||||||
let transparency =
|
let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold
|
||||||
(this.scale - this.minScale) / this.scaleCloseThreshold
|
transparency = transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
|
||||||
transparency =
|
|
||||||
transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
|
|
||||||
return transparency
|
return transparency
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -775,8 +733,7 @@ export class AbstractScatter extends Throwable {
|
|||||||
|
|
||||||
if (this.scaleAutoClose) {
|
if (this.scaleAutoClose) {
|
||||||
if (this.scale <= this.minScale + this.scaleCloseThreshold) {
|
if (this.scale <= this.minScale + this.scaleCloseThreshold) {
|
||||||
if (this.scaleAutoCloseTimeout)
|
if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout)
|
||||||
clearTimeout(this.scaleAutoCloseTimeout)
|
|
||||||
this.scaleAutoCloseTimeout = setTimeout(() => {
|
this.scaleAutoCloseTimeout = setTimeout(() => {
|
||||||
this._checkAutoClose()
|
this._checkAutoClose()
|
||||||
}, 600)
|
}, 600)
|
||||||
@ -939,13 +896,7 @@ export class DOMScatterContainer {
|
|||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
element,
|
element,
|
||||||
{
|
{ stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {}
|
||||||
stopEvents = 'auto',
|
|
||||||
claimEvents = true,
|
|
||||||
useCapture = true,
|
|
||||||
touchAction = 'none',
|
|
||||||
debugCanvas = null
|
|
||||||
} = {}
|
|
||||||
) {
|
) {
|
||||||
this.onCapture = null
|
this.onCapture = null
|
||||||
this.element = element
|
this.element = element
|
||||||
@ -956,11 +907,7 @@ export class DOMScatterContainer {
|
|||||||
movement of scatter objects, the touchmove event has to be bound again.
|
movement of scatter objects, the touchmove event has to be bound again.
|
||||||
*/
|
*/
|
||||||
if (Capabilities.isSafari) {
|
if (Capabilities.isSafari) {
|
||||||
document.addEventListener(
|
document.addEventListener('touchmove', event => this.preventPinch(event), false)
|
||||||
'touchmove',
|
|
||||||
event => this.preventPinch(event),
|
|
||||||
false
|
|
||||||
)
|
|
||||||
stopEvents = false
|
stopEvents = false
|
||||||
} else {
|
} else {
|
||||||
stopEvents = true
|
stopEvents = true
|
||||||
@ -996,14 +943,7 @@ export class DOMScatterContainer {
|
|||||||
for (let [key, point] of current.entries()) {
|
for (let [key, point] of current.entries()) {
|
||||||
let local = point
|
let local = point
|
||||||
context.beginPath()
|
context.beginPath()
|
||||||
context.arc(
|
context.arc(local.x * resolution, local.y * resolution, radius, 0, 2 * Math.PI, false)
|
||||||
local.x * resolution,
|
|
||||||
local.y * resolution,
|
|
||||||
radius,
|
|
||||||
0,
|
|
||||||
2 * Math.PI,
|
|
||||||
false
|
|
||||||
)
|
|
||||||
context.fill()
|
context.fill()
|
||||||
context.stroke()
|
context.stroke()
|
||||||
}
|
}
|
||||||
@ -1026,14 +966,7 @@ export class DOMScatterContainer {
|
|||||||
* @memberof DOMScatterContainer
|
* @memberof DOMScatterContainer
|
||||||
*/
|
*/
|
||||||
remove(scatter) {
|
remove(scatter) {
|
||||||
const element = scatter.element
|
this.scatter.delete(scatter.element)
|
||||||
if (!this.scatter.has(element))
|
|
||||||
console.warn(
|
|
||||||
`Try removing element that is not in the scatter.`,
|
|
||||||
element
|
|
||||||
)
|
|
||||||
|
|
||||||
this.scatter.delete(element)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -1082,10 +1015,7 @@ export class DOMScatterContainer {
|
|||||||
***/
|
***/
|
||||||
let found = document.elementFromPoint(global.x, global.y)
|
let found = document.elementFromPoint(global.x, global.y)
|
||||||
for (let target of this.scatter.values()) {
|
for (let target of this.scatter.values()) {
|
||||||
if (
|
if (target.interactive && this.isDescendant(target.element, found)) {
|
||||||
target.interactive &&
|
|
||||||
this.isDescendant(target.element, found)
|
|
||||||
) {
|
|
||||||
if (this.stopEvents) Events.stop(event)
|
if (this.stopEvents) Events.stop(event)
|
||||||
if (this.claimEvents) event.claimedByScatter = target
|
if (this.claimEvents) event.claimedByScatter = target
|
||||||
return target
|
return target
|
||||||
@ -1516,10 +1446,8 @@ export class DOMScatter extends AbstractScatter {
|
|||||||
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
|
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
|
||||||
|
|
||||||
if (
|
if (
|
||||||
(this.element.offsetWidth + resizeW) / this.scale >
|
(this.element.offsetWidth + resizeW) / this.scale > (this.width * 0.5) / this.scale &&
|
||||||
(this.width * 0.5) / this.scale &&
|
(this.element.offsetHeight + resizeH) / this.scale > (this.height * 0.3) / this.scale
|
||||||
(this.element.offsetHeight + resizeH) / this.scale >
|
|
||||||
(this.height * 0.3) / this.scale
|
|
||||||
)
|
)
|
||||||
TweenLite.to(this.element, 0, {
|
TweenLite.to(this.element, 0, {
|
||||||
width: this.element.offsetWidth + resizeW / this.scale,
|
width: this.element.offsetWidth + resizeW / this.scale,
|
||||||
|
|||||||
145
lib/uitest.js
145
lib/uitest.js
@ -194,9 +194,7 @@ export default class UITest {
|
|||||||
if (opts.eventType) {
|
if (opts.eventType) {
|
||||||
opts.eventTypes = opts.eventType
|
opts.eventTypes = opts.eventType
|
||||||
}
|
}
|
||||||
opts.eventTypes = Array.isArray(opts.eventTypes)
|
opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes]
|
||||||
? opts.eventTypes
|
|
||||||
: [opts.eventTypes]
|
|
||||||
|
|
||||||
// timeline
|
// timeline
|
||||||
//--------------------
|
//--------------------
|
||||||
@ -234,14 +232,8 @@ export default class UITest {
|
|||||||
if (opts.eventTypes[0]) {
|
if (opts.eventTypes[0]) {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const eventStart = Event.create(
|
const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', eventStart)
|
||||||
coords,
|
|
||||||
opts.eventTypes[0],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', eventStart)
|
|
||||||
elem.dispatchEvent(eventStart)
|
elem.dispatchEvent(eventStart)
|
||||||
|
|
||||||
// onStart
|
// onStart
|
||||||
@ -253,14 +245,8 @@ export default class UITest {
|
|||||||
|
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const eventComplete = Event.create(
|
const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', eventComplete)
|
||||||
coords,
|
|
||||||
opts.eventTypes[1],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', eventComplete)
|
|
||||||
elem.dispatchEvent(eventComplete)
|
elem.dispatchEvent(eventComplete)
|
||||||
|
|
||||||
// onComplete
|
// onComplete
|
||||||
@ -355,14 +341,8 @@ export default class UITest {
|
|||||||
onStart: () => {
|
onStart: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[0],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onStart
|
// onStart
|
||||||
@ -374,14 +354,8 @@ export default class UITest {
|
|||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[1],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onUpdate
|
// onUpdate
|
||||||
@ -393,14 +367,8 @@ export default class UITest {
|
|||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[2],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onComplete
|
// onComplete
|
||||||
@ -551,66 +519,39 @@ export default class UITest {
|
|||||||
onStart: () => {
|
onStart: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[0],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onStart
|
// onStart
|
||||||
//--------------------
|
//--------------------
|
||||||
if (
|
if (opts.onStart && (opts.doubleCallbacks || key === 0)) {
|
||||||
opts.onStart &&
|
|
||||||
(opts.doubleCallbacks || key === 0)
|
|
||||||
) {
|
|
||||||
opts.onStart.call(this, event)
|
opts.onStart.call(this, event)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[1],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onUpdate
|
// onUpdate
|
||||||
//--------------------
|
//--------------------
|
||||||
if (
|
if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) {
|
||||||
opts.onUpdate &&
|
|
||||||
(opts.doubleCallbacks || key === 0)
|
|
||||||
) {
|
|
||||||
opts.onUpdate.call(this, event)
|
opts.onUpdate.call(this, event)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
// create and dispatch event
|
// create and dispatch event
|
||||||
//--------------------
|
//--------------------
|
||||||
const event = Event.create(
|
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||||
elem,
|
if (this.opts.debug) console.log('dispatch event', event)
|
||||||
from,
|
|
||||||
opts.eventTypes[2],
|
|
||||||
eventOpts
|
|
||||||
)
|
|
||||||
if (this.opts.debug)
|
|
||||||
console.log('dispatch event', event)
|
|
||||||
elem.dispatchEvent(event)
|
elem.dispatchEvent(event)
|
||||||
|
|
||||||
// onComplete
|
// onComplete
|
||||||
//--------------------
|
//--------------------
|
||||||
if (
|
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
|
||||||
opts.onComplete &&
|
|
||||||
(opts.doubleCallbacks || key === 0)
|
|
||||||
) {
|
|
||||||
opts.onComplete.call(this, event)
|
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!'
|
'No execution time was specified for this action, and a default interval was not set in the class constructor!'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
timelinePosition =
|
timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1)
|
||||||
Math.max(...this._timelinePositions) +
|
|
||||||
(this.opts.defaultInterval || 1)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (opts === null) {
|
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.
|
* @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) {
|
static extractElement(context, element) {
|
||||||
const cont = Util.isFrame(context)
|
const cont = Util.isFrame(context) ? context.contentDocument : context.document
|
||||||
? context.contentDocument
|
const elem = Util.isString(element) ? cont.querySelector(element) : element
|
||||||
: context.document
|
|
||||||
const elem = Util.isString(element)
|
|
||||||
? cont.querySelector(element)
|
|
||||||
: element
|
|
||||||
|
|
||||||
return elem
|
return elem
|
||||||
}
|
}
|
||||||
@ -866,9 +801,7 @@ class Util {
|
|||||||
type: 'thru'
|
type: 'thru'
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
opts.bezier.values = opts.bezier.values.map(it =>
|
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it))
|
||||||
Util.extractPosition(it)
|
|
||||||
)
|
|
||||||
bezier = opts.bezier
|
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 {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.
|
* @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(
|
static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) {
|
||||||
target,
|
|
||||||
position = { x: 0, y: 0 },
|
|
||||||
type = 'pointerup',
|
|
||||||
opts = {}
|
|
||||||
) {
|
|
||||||
const rect =
|
const rect =
|
||||||
typeof target.getBoundingClientRect === 'function'
|
typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 }
|
||||||
? target.getBoundingClientRect()
|
|
||||||
: { x: 0, y: 0 }
|
|
||||||
|
|
||||||
// EventInit
|
// EventInit
|
||||||
const eventOpts = {
|
const eventOpts = {
|
||||||
@ -1072,25 +998,12 @@ class Event {
|
|||||||
if (type.startsWith('pointer')) {
|
if (type.startsWith('pointer')) {
|
||||||
return new PointerEvent(
|
return new PointerEvent(
|
||||||
type,
|
type,
|
||||||
Object.assign(
|
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts)
|
||||||
{},
|
|
||||||
eventOpts,
|
|
||||||
uiEventOpts,
|
|
||||||
mouseEventOpts,
|
|
||||||
pointerEventOpts,
|
|
||||||
opts
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
} else if (type.startsWith('touch')) {
|
} else if (type.startsWith('touch')) {
|
||||||
return new TouchEvent(
|
return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts))
|
||||||
type,
|
|
||||||
Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
return new MouseEvent(
|
return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts))
|
||||||
type,
|
|
||||||
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
65
lib/utils.js
65
lib/utils.js
@ -1,4 +1,4 @@
|
|||||||
/* globals WebKitPoint */
|
/* globals */
|
||||||
|
|
||||||
/** Tests whether an object is empty
|
/** Tests whether an object is empty
|
||||||
* @param {Object} obj - the object to be tested
|
* @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.
|
set and it doesn't suffer from frequent reselections.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
if (!Array.isArray(population))
|
if (!Array.isArray(population)) throw new TypeError('Population must be an array.')
|
||||||
throw new TypeError('Population must be an array.')
|
|
||||||
let n = population.length
|
let n = population.length
|
||||||
if (k < 0 || k > n)
|
if (k < 0 || k > n) throw new RangeError('Sample larger than population or is negative')
|
||||||
throw new RangeError('Sample larger than population or is negative')
|
|
||||||
|
|
||||||
let result = new Array(k)
|
let result = new Array(k)
|
||||||
let setsize = 21 // size of a small set minus size of an empty list
|
let setsize = 21 // size of a small set minus size of an empty list
|
||||||
@ -143,9 +141,7 @@ export class Dates {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static startYearRange(date) {
|
static startYearRange(date) {
|
||||||
return new Date(
|
return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999))
|
||||||
Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static endYearRange(date) {
|
static endYearRange(date) {
|
||||||
@ -165,11 +161,7 @@ export class Dates {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static nextDay(date) {
|
static nextDay(date) {
|
||||||
return this.create(
|
return this.create(date.getFullYear(), date.getMonth(), date.getDate() + 1)
|
||||||
date.getFullYear(),
|
|
||||||
date.getMonth(),
|
|
||||||
date.getDate() + 1
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static nextHour(date) {
|
static nextHour(date) {
|
||||||
@ -672,15 +664,9 @@ export class Polygon {
|
|||||||
*/
|
*/
|
||||||
draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) {
|
draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) {
|
||||||
context.beginPath()
|
context.beginPath()
|
||||||
context.moveTo(
|
context.moveTo(this.points[0].x + this.center.x, this.points[0].y + this.center.y)
|
||||||
this.points[0].x + this.center.x,
|
|
||||||
this.points[0].y + this.center.y
|
|
||||||
)
|
|
||||||
for (let i = 1; i < this.points.length; i++) {
|
for (let i = 1; i < this.points.length; i++) {
|
||||||
context.lineTo(
|
context.lineTo(this.points[i].x + this.center.x, this.points[i].y + this.center.y)
|
||||||
this.points[i].x + this.center.x,
|
|
||||||
this.points[i].y + this.center.y
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
context.closePath()
|
context.closePath()
|
||||||
context.lineWidth = lineWidth
|
context.lineWidth = lineWidth
|
||||||
@ -737,10 +723,7 @@ export class Polygon {
|
|||||||
for (i = 0, j = nvert - 1; i < nvert; j = i++) {
|
for (i = 0, j = nvert - 1; i < nvert; j = i++) {
|
||||||
if (
|
if (
|
||||||
verty[i] > testy != verty[j] > testy &&
|
verty[i] > testy != verty[j] > testy &&
|
||||||
testx <
|
testx < ((vertx[j] - vertx[i]) * (testy - verty[i])) / (verty[j] - verty[i]) + vertx[i]
|
||||||
((vertx[j] - vertx[i]) * (testy - verty[i])) /
|
|
||||||
(verty[j] - verty[i]) +
|
|
||||||
vertx[i]
|
|
||||||
)
|
)
|
||||||
c = !c
|
c = !c
|
||||||
}
|
}
|
||||||
@ -774,12 +757,8 @@ export class Polygon {
|
|||||||
for (side = 0; side < this.getNumberOfSides(); side++) {
|
for (side = 0; side < this.getNumberOfSides(); side++) {
|
||||||
/* get the axis that we will project onto */
|
/* get the axis that we will project onto */
|
||||||
if (side == 0) {
|
if (side == 0) {
|
||||||
axis.x =
|
axis.x = this.points[this.getNumberOfSides() - 1].y - this.points[0].y
|
||||||
this.points[this.getNumberOfSides() - 1].y -
|
axis.y = this.points[0].x - this.points[this.getNumberOfSides() - 1].x
|
||||||
this.points[0].y
|
|
||||||
axis.y =
|
|
||||||
this.points[0].x -
|
|
||||||
this.points[this.getNumberOfSides() - 1].x
|
|
||||||
} else {
|
} else {
|
||||||
axis.x = this.points[side - 1].y - this.points[side].y
|
axis.x = this.points[side - 1].y - this.points[side].y
|
||||||
axis.y = this.points[side].x - this.points[side - 1].x
|
axis.y = this.points[side].x - this.points[side - 1].x
|
||||||
@ -803,8 +782,7 @@ export class Polygon {
|
|||||||
maxA += tmp
|
maxA += tmp
|
||||||
|
|
||||||
/* project polygon B onto axis to determine the min/max */
|
/* project polygon B onto axis to determine the min/max */
|
||||||
minB = maxB =
|
minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y
|
||||||
other.points[0].x * axis.x + other.points[0].y * axis.y
|
|
||||||
for (i = 1; i < other.getNumberOfSides(); i++) {
|
for (i = 1; i < other.getNumberOfSides(); i++) {
|
||||||
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
|
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
|
||||||
if (tmp > maxB) maxB = tmp
|
if (tmp > maxB) maxB = tmp
|
||||||
@ -831,12 +809,8 @@ export class Polygon {
|
|||||||
for (side = 0; side < other.getNumberOfSides(); side++) {
|
for (side = 0; side < other.getNumberOfSides(); side++) {
|
||||||
/* get the axis that we will project onto */
|
/* get the axis that we will project onto */
|
||||||
if (side == 0) {
|
if (side == 0) {
|
||||||
axis.x =
|
axis.x = other.points[other.getNumberOfSides() - 1].y - other.points[0].y
|
||||||
other.points[other.getNumberOfSides() - 1].y -
|
axis.y = other.points[0].x - other.points[other.getNumberOfSides() - 1].x
|
||||||
other.points[0].y
|
|
||||||
axis.y =
|
|
||||||
other.points[0].x -
|
|
||||||
other.points[other.getNumberOfSides() - 1].x
|
|
||||||
} else {
|
} else {
|
||||||
axis.x = other.points[side - 1].y - other.points[side].y
|
axis.x = other.points[side - 1].y - other.points[side].y
|
||||||
axis.y = other.points[side].x - other.points[side - 1].x
|
axis.y = other.points[side].x - other.points[side - 1].x
|
||||||
@ -860,8 +834,7 @@ export class Polygon {
|
|||||||
maxA += tmp
|
maxA += tmp
|
||||||
|
|
||||||
/* project polygon B onto axis to determine the min/max */
|
/* project polygon B onto axis to determine the min/max */
|
||||||
minB = maxB =
|
minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y
|
||||||
other.points[0].x * axis.x + other.points[0].y * axis.y
|
|
||||||
for (i = 1; i < other.getNumberOfSides(); i++) {
|
for (i = 1; i < other.getNumberOfSides(); i++) {
|
||||||
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
|
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
|
||||||
if (tmp > maxB) maxB = tmp
|
if (tmp > maxB) maxB = tmp
|
||||||
@ -918,12 +891,7 @@ export class Rect {
|
|||||||
* @memberof Rect
|
* @memberof Rect
|
||||||
*/
|
*/
|
||||||
static contains(rect, point) {
|
static contains(rect, point) {
|
||||||
return (
|
return point.x > rect.left && point.x < rect.x + rect.right && point.y > rect.top && point.y < rect.bottom
|
||||||
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
|
* @access private
|
||||||
*/
|
*/
|
||||||
__push(value) {
|
__push(value) {
|
||||||
let removed =
|
let removed = this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0
|
||||||
this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0
|
|
||||||
|
|
||||||
this.buffer.push(value)
|
this.buffer.push(value)
|
||||||
return removed
|
return removed
|
||||||
|
|||||||
90
package-lock.json
generated
90
package-lock.json
generated
@ -1979,9 +1979,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"eslint": {
|
"eslint": {
|
||||||
"version": "6.0.1",
|
"version": "6.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/eslint/-/eslint-6.1.0.tgz",
|
||||||
"integrity": "sha512-DyQRaMmORQ+JsWShYsSg4OPTjY56u1nCjAmICrE8vLWqyLKxhFXOthwMj1SA8xwfrv0CofLNVnqbfyhwCkaO0w==",
|
"integrity": "sha512-QhrbdRD7ofuV09IuE2ySWBz0FyXCq0rriLTZXZqaWSI79CVtHVRdkFuFTViiqzZhkCgfOh9USpriuGN2gIpZDQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@babel/code-frame": "^7.0.0",
|
"@babel/code-frame": "^7.0.0",
|
||||||
@ -1990,7 +1990,7 @@
|
|||||||
"cross-spawn": "^6.0.5",
|
"cross-spawn": "^6.0.5",
|
||||||
"debug": "^4.0.1",
|
"debug": "^4.0.1",
|
||||||
"doctrine": "^3.0.0",
|
"doctrine": "^3.0.0",
|
||||||
"eslint-scope": "^4.0.3",
|
"eslint-scope": "^5.0.0",
|
||||||
"eslint-utils": "^1.3.1",
|
"eslint-utils": "^1.3.1",
|
||||||
"eslint-visitor-keys": "^1.0.0",
|
"eslint-visitor-keys": "^1.0.0",
|
||||||
"espree": "^6.0.0",
|
"espree": "^6.0.0",
|
||||||
@ -1998,34 +1998,35 @@
|
|||||||
"esutils": "^2.0.2",
|
"esutils": "^2.0.2",
|
||||||
"file-entry-cache": "^5.0.1",
|
"file-entry-cache": "^5.0.1",
|
||||||
"functional-red-black-tree": "^1.0.1",
|
"functional-red-black-tree": "^1.0.1",
|
||||||
"glob-parent": "^3.1.0",
|
"glob-parent": "^5.0.0",
|
||||||
"globals": "^11.7.0",
|
"globals": "^11.7.0",
|
||||||
"ignore": "^4.0.6",
|
"ignore": "^4.0.6",
|
||||||
"import-fresh": "^3.0.0",
|
"import-fresh": "^3.0.0",
|
||||||
"imurmurhash": "^0.1.4",
|
"imurmurhash": "^0.1.4",
|
||||||
"inquirer": "^6.2.2",
|
"inquirer": "^6.4.1",
|
||||||
"is-glob": "^4.0.0",
|
"is-glob": "^4.0.0",
|
||||||
"js-yaml": "^3.13.1",
|
"js-yaml": "^3.13.1",
|
||||||
"json-stable-stringify-without-jsonify": "^1.0.1",
|
"json-stable-stringify-without-jsonify": "^1.0.1",
|
||||||
"levn": "^0.3.0",
|
"levn": "^0.3.0",
|
||||||
"lodash": "^4.17.11",
|
"lodash": "^4.17.14",
|
||||||
"minimatch": "^3.0.4",
|
"minimatch": "^3.0.4",
|
||||||
"mkdirp": "^0.5.1",
|
"mkdirp": "^0.5.1",
|
||||||
"natural-compare": "^1.4.0",
|
"natural-compare": "^1.4.0",
|
||||||
"optionator": "^0.8.2",
|
"optionator": "^0.8.2",
|
||||||
"progress": "^2.0.0",
|
"progress": "^2.0.0",
|
||||||
"regexpp": "^2.0.1",
|
"regexpp": "^2.0.1",
|
||||||
"semver": "^5.5.1",
|
"semver": "^6.1.2",
|
||||||
"strip-ansi": "^4.0.0",
|
"strip-ansi": "^5.2.0",
|
||||||
"strip-json-comments": "^2.0.1",
|
"strip-json-comments": "^3.0.1",
|
||||||
"table": "^5.2.3",
|
"table": "^5.2.3",
|
||||||
"text-table": "^0.2.0"
|
"text-table": "^0.2.0",
|
||||||
|
"v8-compile-cache": "^2.0.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "3.0.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
|
||||||
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"debug": {
|
"debug": {
|
||||||
@ -2043,20 +2044,41 @@
|
|||||||
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
|
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
|
||||||
"dev": true
|
"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": {
|
"ms": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||||
"dev": true
|
"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": {
|
"strip-ansi": {
|
||||||
"version": "4.0.0",
|
"version": "5.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
|
||||||
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"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": {
|
"eslint-scope": {
|
||||||
"version": "4.0.3",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
|
||||||
"integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
|
"integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"esrecurse": "^4.1.0",
|
"esrecurse": "^4.1.0",
|
||||||
@ -2123,9 +2145,9 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"acorn": {
|
"acorn": {
|
||||||
"version": "6.2.0",
|
"version": "6.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
|
||||||
"integrity": "sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw==",
|
"integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==",
|
||||||
"dev": true
|
"dev": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -5954,11 +5976,11 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"propagating-hammerjs": {
|
"propagating-hammerjs": {
|
||||||
"version": "1.4.6",
|
"version": "1.4.7",
|
||||||
"resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz",
|
"resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.7.tgz",
|
||||||
"integrity": "sha1-/tAOmwB2f/1C0U9bUxvEk+tnLjc=",
|
"integrity": "sha512-oW9Wd+W2Tp5uOz6Fh4mEU7p+FoyU85smLH/mPga83Loh0pHa6AH4ZHGywvwMk3TWP31l7iUsvJyW265p4Ipwrg==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"hammerjs": "^2.0.6"
|
"hammerjs": "^2.0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"proxy-from-env": {
|
"proxy-from-env": {
|
||||||
@ -6001,9 +6023,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"puppeteer": {
|
"puppeteer": {
|
||||||
"version": "1.18.1",
|
"version": "1.19.0",
|
||||||
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz",
|
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.19.0.tgz",
|
||||||
"integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==",
|
"integrity": "sha512-2S6E6ygpoqcECaagDbBopoSOPDv0pAZvTbnBgUY+6hq0/XDFDOLEMNlHF/SKJlzcaZ9ckiKjKDuueWI3FN/WXw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"debug": "^4.1.0",
|
"debug": "^4.1.0",
|
||||||
@ -7743,6 +7765,12 @@
|
|||||||
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
|
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
|
||||||
"dev": true
|
"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": {
|
"v8flags": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",
|
||||||
|
|||||||
@ -8,6 +8,9 @@
|
|||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "node bin/testrunner.js",
|
"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",
|
"build": "rollup --config ./rollup.config.js",
|
||||||
"watch": "rollup --watch --config ./rollup.config.js",
|
"watch": "rollup --watch --config ./rollup.config.js",
|
||||||
"3rdparty": "gulp",
|
"3rdparty": "gulp",
|
||||||
@ -22,7 +25,7 @@
|
|||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@pixi/jsdoc-template": "^2.4.2",
|
"@pixi/jsdoc-template": "^2.4.2",
|
||||||
"eslint": "^6.0.1",
|
"eslint": "^6.1.0",
|
||||||
"eslint-config-prettier": "^6.0.0",
|
"eslint-config-prettier": "^6.0.0",
|
||||||
"eslint-plugin-prettier": "^3.1.0",
|
"eslint-plugin-prettier": "^3.1.0",
|
||||||
"fs-extra": "^8.0.1",
|
"fs-extra": "^8.0.1",
|
||||||
@ -34,7 +37,7 @@
|
|||||||
"gulp-uglify": "^3.0.2",
|
"gulp-uglify": "^3.0.2",
|
||||||
"htmlhint": "^0.11.0",
|
"htmlhint": "^0.11.0",
|
||||||
"prettier": "^1.18.2",
|
"prettier": "^1.18.2",
|
||||||
"puppeteer": "^1.18.1",
|
"puppeteer": "^1.19.0",
|
||||||
"stylelint": "^10.1.0",
|
"stylelint": "^10.1.0",
|
||||||
"stylelint-config-standard": "^18.3.0"
|
"stylelint-config-standard": "^18.3.0"
|
||||||
},
|
},
|
||||||
@ -47,6 +50,6 @@
|
|||||||
"pixi-particles": "^4.1.1",
|
"pixi-particles": "^4.1.1",
|
||||||
"pixi-projection": "^0.2.8",
|
"pixi-projection": "^0.2.8",
|
||||||
"pixi.js": "^4.8.8",
|
"pixi.js": "^4.8.8",
|
||||||
"propagating-hammerjs": "^1.4.6"
|
"propagating-hammerjs": "^1.4.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
7
test/chart/Chart.min.js
vendored
Normal file
7
test/chart/Chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
75
test/chart/data.js
Normal file
75
test/chart/data.js
Normal file
File diff suppressed because one or more lines are too long
97
test/chart/index.html
Normal file
97
test/chart/index.html
Normal 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
92
test/tests/eventlistener/hammerjs.html
Normal 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
155
test/tests/eventlistener/hammerjs.js
Normal 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
BIN
test/tests/eventlistener/images/1280x960.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
test/tests/eventlistener/images/96x96.png
Normal file
BIN
test/tests/eventlistener/images/96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
85
test/tests/eventlistener/index.html
Normal file
85
test/tests/eventlistener/index.html
Normal 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
155
test/tests/eventlistener/index.js
Normal 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
91
test/tests/eventlistener/remove.html
Normal 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
155
test/tests/eventlistener/remove.js
Normal 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(', ')}]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
`
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user