Fixed theming bug in button and button group.
This commit is contained in:
@@ -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 && this.__initWidth > this.opts.maxWidth) ||
|
||||
(this.opts.maxHeight != null && 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 && 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 && 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 && 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 && 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 && 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
|
||||
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()
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user