Fixed theming bug in button and button group.

This commit is contained in:
2019-08-08 13:46:02 +02:00
parent cdc6461064
commit 97d33cf177
72 changed files with 255 additions and 844 deletions
+69 -48
View File
@@ -267,10 +267,6 @@
<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>
@@ -279,8 +275,6 @@
<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">
@@ -1565,8 +1559,8 @@ export default class ButtonGroup extends PIXI.Container {
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
textStyle: {},
textStyleActive: {},
style: 'default',
radius: theme.radius,
disabled: null,
@@ -1579,6 +1573,9 @@ export default class ButtonGroup extends PIXI.Container {
opts
)
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
this.buttons = []
this._disabled = null
@@ -1744,6 +1741,7 @@ export default class ButtonGroup extends PIXI.Container {
this.addChildAt(background, 0)
this.__initWidth = this.container.width
this.__initHeight = this.container.height
}
return this
@@ -1891,18 +1889,23 @@ export default class ButtonGroup extends PIXI.Container {
* @param {*} event
*/
onStart(event) {
this.__dragging = true
if (
(this.opts.maxWidth != null &amp;&amp; this.__initWidth > this.opts.maxWidth) ||
(this.opts.maxHeight != null &amp;&amp; this.__initHeight > this.opts.maxHeight)
) {
this.__dragging = true
this.capture(event)
this.capture(event)
this.__delta = {
x: this.container.position.x - event.data.global.x,
y: this.container.position.y - event.data.global.y
}
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')
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
}
@@ -1914,7 +1917,6 @@ export default class ButtonGroup extends PIXI.Container {
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 {
@@ -1939,20 +1941,34 @@ export default class ButtonGroup extends PIXI.Container {
const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
if (this.opts.orientation === 'horizontal') {
const distanceToLeft = this.container.x
const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
if (distanceToLeft > 0 &amp;&amp; distanceToLeft > distanceToRight) {
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 (distanceToRight > 0 &amp;&amp; distanceToRight > distanceToLeft) {
throwProps.x.end = this.opts.maxWidth - this.__initWidth
}
} else {
const distanceToTop = this.container.y
const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height
if (distanceToTop > 0 &amp;&amp; distanceToTop > distanceToBottom) {
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
} else if (distanceToBottom > 0 &amp;&amp; distanceToBottom > distanceToTop) {
throwProps.y.end = this.opts.maxHeight - this.container.height
}
}
@@ -1984,25 +2000,30 @@ export default class ButtonGroup extends PIXI.Container {
* @param {*} event
*/
onScroll(event) {
this.capture(event)
if (
(this.opts.maxWidth != null &amp;&amp; this.__initWidth > this.opts.maxWidth) ||
(this.opts.maxHeight != null &amp;&amp; this.__initHeight > this.opts.maxHeight)
) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.__initWidth &lt; this.opts.maxWidth) {
this.container.position.x = this.opts.maxWidth - this.__initWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.container.height &lt; this.opts.maxHeight) {
this.container.position.y = this.opts.maxHeight - this.container.height
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.__initWidth &lt; this.opts.maxWidth) {
this.container.position.x = this.opts.maxWidth - this.__initWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.container.height &lt; this.opts.maxHeight) {
this.container.position.y = this.opts.maxHeight - this.container.height
}
}
this.stack()
}
this.stack()
}
/**
@@ -2016,7 +2037,7 @@ export default class ButtonGroup extends PIXI.Container {
}
/**
*
* @private
*/
stack() {
if (this.opts.maxWidth) {
@@ -2027,7 +2048,7 @@ export default class ButtonGroup extends PIXI.Container {
}
/**
*
* @private
*/
_stackHorizontal() {
const sorted = []
@@ -2084,7 +2105,7 @@ export default class ButtonGroup extends PIXI.Container {
}
/**
*
* @private
*/
_stackVertical() {
const sorted = []
@@ -2153,7 +2174,7 @@ export default class ButtonGroup 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 Aug 06 2019 12:01:03 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 13:45:13 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>