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

Implemented stacked button groups.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-31 16:12:00 +02:00
parent 73342a0506
commit 614b4d8350
70 changed files with 1782 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/out/pixi_button.js.html
+51 -80
View File
@@ -263,12 +263,20 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#_stackHorizontal"><a href="ButtonGroup.html#_stackHorizontal">_stackHorizontal</a></li>
<li class="parent " data-name="ButtonGroup#_stackVertical"><a href="ButtonGroup.html#_stackVertical">_stackVertical</a></li>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
<li class="parent " data-name="ButtonGroup#show"><a href="ButtonGroup.html#show">show</a></li>
<li class="parent " data-name="ButtonGroup#stack"><a href="ButtonGroup.html#stack">stack</a></li>
</ul>
<ul class="events itemMembers">
@@ -1438,11 +1446,12 @@
</div>
</header>
<article>
<pre id="source-code" class="prettyprint source linenums"><code>/* global PIXI TweenLite */
<pre id="source-code" class="prettyprint source linenums"><code>/* global */
import Theme from './theme.js'
import Tooltip from './tooltip.js'
import Badge from './badge.js'
import Events from '../events.js'
import { Points } from '../utils.js'
/**
* Callback for the button action.
@@ -1596,15 +1605,9 @@ export default class Button extends PIXI.Container {
this.id = this.opts.id
if (
typeof this.opts.icon === 'undefined' &amp;&amp;
typeof this.opts.iconActive !== 'undefined'
) {
if (typeof this.opts.icon === 'undefined' &amp;&amp; typeof this.opts.iconActive !== 'undefined') {
this.opts.icon = this.opts.iconActive
} else if (
typeof this.opts.icon !== 'undefined' &amp;&amp;
typeof this.opts.iconActive === 'undefined'
) {
} else if (typeof this.opts.icon !== 'undefined' &amp;&amp; typeof this.opts.iconActive === 'undefined') {
this.opts.iconActive = this.opts.icon
}
@@ -1620,6 +1623,8 @@ export default class Button extends PIXI.Container {
this._active = null
this._disabled = null
this.__start = { x: null, y: null }
this.iconInactive = null
this.iconActive = null
this.text = null
@@ -1674,17 +1679,11 @@ export default class Button extends PIXI.Container {
// Icon
//-----------------
if (this.opts.icon) {
this.iconInactive = this.loadIcon(
this.opts.icon,
this.opts.iconColor
)
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
}
if (this.opts.iconActive) {
this.iconActive = this.loadIcon(
this.opts.iconActive,
this.opts.iconColorActive
)
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
}
// interaction
@@ -1712,6 +1711,8 @@ export default class Button extends PIXI.Container {
// eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => {
//this.capture(e)
this.__start.x = e.data.global.x
this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
@@ -1720,25 +1721,30 @@ export default class Button extends PIXI.Container {
this.button.on('pointerup', e => {
this.capture(e)
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
const distance = Points.distance(e.data.global, this.__start)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (distance &lt; 5) {
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
}
}
})
@@ -1759,11 +1765,7 @@ export default class Button extends PIXI.Container {
content: this.opts.tooltip
})
} else {
this.opts.tooltip = Object.assign(
{},
{ object: this },
this.opts.tooltip
)
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
this.tooltip = new Tooltip(this.opts.tooltip)
}
}
@@ -1793,15 +1795,10 @@ export default class Button extends PIXI.Container {
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x =
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
@@ -1809,15 +1806,10 @@ export default class Button extends PIXI.Container {
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y =
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
@@ -1956,8 +1948,7 @@ export default class Button extends PIXI.Container {
this.content.x = (this._width - this.content.width) / 2
break
case 'right':
this.content.x =
this._width - this.opts.padding - this.content.width
this.content.x = this._width - this.opts.padding - this.content.width
break
}
@@ -1969,8 +1960,7 @@ export default class Button extends PIXI.Container {
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y =
this._height - this.opts.padding - this.content.height
this.content.y = this._height - this.opts.padding - this.content.height
break
}
@@ -1986,30 +1976,13 @@ export default class Button extends PIXI.Container {
draw() {
this.button.clear()
if (this.active) {
this.button.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.button.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
} else {
this.button.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
}
this.button.drawRoundedRect(
0,
0,
this._width,
this._height,
this.opts.radius
)
this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
this.button.endFill()
return this
@@ -2126,9 +2099,7 @@ export default class Button extends PIXI.Container {
size = this.opts.minHeight - 2 * this.opts.padding
}
const url = Button.iconIsUrl(icon)
? icon
: `../../assets/icons/${icon}.png`
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
const iconTexture = PIXI.Texture.fromImage(url, true)
const sprite = new PIXI.Sprite(iconTexture)
@@ -2182,7 +2153,7 @@ export default class Button extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Wed Jul 31 2019 15:00:47 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>