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_buttongroup.js.html
+334 -55
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,8 +1446,11 @@
</div>
</header>
<article>
<pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
<pre id="source-code" class="prettyprint source linenums"><code>/* globals ThrowPropsPlugin, Strong */
import Theme from './theme.js'
import Button from './button.js'
import Events from '../events.js'
/**
* Class that represents a PixiJS ButtonGroup.
@@ -1463,7 +1474,7 @@ import Button from './button.js'
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
*/
export default class ButtonGroup extends PIXI.Graphics {
export default class ButtonGroup extends PIXI.Container {
/**
* Creates an instance of a ButtonGroup.
*
@@ -1479,9 +1490,10 @@ export default class ButtonGroup extends PIXI.Graphics {
* or a Theme object.
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
* @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
* @param {number} [opts.maxWidth] - The maximum width of the buttongroup. Only used if stacked is true and the orientation is horizontal.
* @param {number} [opts.maxHeight] - The maximum height of the buttongroup. Only used if stacked is true and the orientation is vertical.
* @param {boolean} [opts.stacked=false] - If set to true, the buttons of the buttongroup gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.
* @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.
* @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.
* @param {number} [opts.stackPadding=10] - The padding for stacked buttons.
* @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).
* @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
* @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
* @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@@ -1530,6 +1542,10 @@ export default class ButtonGroup extends PIXI.Graphics {
buttons: [],
minWidth: 44,
minHeight: 44,
maxWidth: null,
maxHeight: null,
stackPadding: 10,
app: null,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
@@ -1562,6 +1578,7 @@ export default class ButtonGroup extends PIXI.Graphics {
this.buttons = []
this._disabled = null
this.__dragging = false
this.visible = this.opts.visible
@@ -1581,9 +1598,16 @@ export default class ButtonGroup extends PIXI.Graphics {
* @return {ButtonGroup} A reference to the button group for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Graphics()
this.addChild(container)
this.container = container
// Buttons
//-----------------
let position = 0
let index = 0
for (let it of this.opts.buttons) {
delete it.x
@@ -1607,19 +1631,11 @@ export default class ButtonGroup extends PIXI.Graphics {
it.fillActive = it.fillActive || this.opts.fillActive
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
it.stroke = it.stroke || this.opts.stroke
it.strokeWidth =
it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
it.strokeAlpha =
it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeActive = it.strokeActive || this.opts.strokeActive
it.strokeActiveWidth =
it.strokeActiveWidth != null
? it.strokeActiveWidth
: this.opts.strokeActiveWidth
it.strokeActiveAlpha =
it.strokeActiveAlpha != null
? it.strokeActiveAlpha
: this.opts.strokeActiveAlpha
it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
it.textStyle = it.textStyle || this.opts.textStyle
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
it.style = it.style || this.opts.style
@@ -1638,10 +1654,7 @@ export default class ButtonGroup extends PIXI.Graphics {
it.align = it.align || this.opts.align
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
it.afterAction = (event, button) => {
if (
this.opts.type === 'radio' &amp;&amp;
button.opts.type === 'default'
) {
if (this.opts.type === 'radio' &amp;&amp; button.opts.type === 'default') {
this.buttons.forEach(it => {
if (it.opts.type === 'default') {
it.active = false
@@ -1658,23 +1671,24 @@ export default class ButtonGroup extends PIXI.Graphics {
if (typeof it.tooltip === 'string') {
it.tooltip = { content: it.tooltip, container: this }
} else {
it.tooltip = Object.assign(
{},
{ container: this },
it.tooltip
)
it.tooltip = Object.assign({}, { container: this }, it.tooltip)
}
}
let button = new Button(it)
this.addChild(button)
this.container.addChild(button)
this.buttons.push(button)
position +=
(this.opts.orientation === 'horizontal'
? button.width
: button.height) + this.opts.margin
button.__originalPosition = {
x: button.x,
y: button.y
}
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
button.__initIndex = index
index++
}
if (this.opts.orientation === 'vertical') {
@@ -1692,6 +1706,42 @@ export default class ButtonGroup extends PIXI.Graphics {
this.disabled = this.opts.disabled
}
// interaction
//--------------------
if (this.opts.margin > 0 &amp;&amp; (this.opts.maxWidth || this.opts.maxHeight)) {
this.interactive = true
this.on('pointerdown', this.onStart.bind(this))
this.on('pointermove', this.onMove.bind(this))
this.on('pointerup', this.onEnd.bind(this))
this.on('pointercancel', this.onEnd.bind(this))
this.on('pointerout', this.onEnd.bind(this))
this.on('pointerupoutside', this.onEnd.bind(this))
this.on('scroll', this.onScroll.bind(this))
// mousewheel
//--------------------
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
const bounds = this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
event.preventDefault()
this.emit('scroll', event)
}
})
}
const background = new PIXI.Graphics()
background.beginFill(0x000000, 0)
background.drawRect(0, 0, this.width, this.height)
background.endFill()
this.addChildAt(background, 0)
this.__initWidth = this.container.width
}
return this
}
@@ -1709,6 +1759,12 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.draw()
// stack
//-----------------
if (this.opts.margin > 0 &amp;&amp; (this.opts.maxWidth || this.opts.maxHeight)) {
this.stack()
}
return this
}
@@ -1722,41 +1778,27 @@ export default class ButtonGroup extends PIXI.Graphics {
if (this.opts.margin === 0) {
this.buttons.forEach(it => it.hide())
this.clear()
this.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.beginFill(this.opts.fill, this.opts.fillAlpha)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
this.container.clear()
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
this.container.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
// Draw borders
this.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha / 2
)
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
this.buttons.forEach((it, i) => {
if (i > 0) {
this.moveTo(it.x, it.y)
this.container.moveTo(it.x, it.y)
if (this.opts.orientation === 'horizontal') {
this.lineTo(it.x, it.height)
this.container.lineTo(it.x, it.height)
} else {
this.lineTo(it.width, it.y)
this.container.lineTo(it.width, it.y)
}
}
})
this.endFill()
this.container.endFill()
}
return this
@@ -1810,6 +1852,243 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
*
* @private
* @param {*} event
*/
onStart(event) {
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)
if (typeof ThrowPropsPlugin != 'undefined') {
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) {
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) {
throwProps.y.end = 0
} else if (distanceToBottom > 0 &amp;&amp; distanceToBottom > distanceToTop) {
throwProps.y.end = this.opts.maxHeight - this.container.height
}
}
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onUpdate: () => this.stack(),
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
}
}
}
/**
*
* @private
* @param {*} event
*/
onScroll(event) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.__initWidth &lt; this.opts.maxWidth) {
this.container.position.x = this.opts.maxWidth - this.__initWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.container.height &lt; this.opts.maxHeight) {
this.container.position.y = this.opts.maxHeight - this.container.height
}
}
this.stack()
}
/**
* Captures an event to inform InteractionMapper about processed events.
*
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent = event.data &amp;&amp; event.data.originalEvent ? event.data.originalEvent : event
Events.capturedBy(originalEvent, this)
}
/**
*
*/
stack() {
if (this.opts.maxWidth) {
this._stackHorizontal()
} else if (this.opts.maxHeight) {
this._stackVertical()
}
}
/**
*
*/
_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.width
const paddingLeft = index * this.opts.stackPadding
const paddingRight = reverseCounter * this.opts.stackPadding
if (leftCorner &lt; paddingLeft) {
// left border
it.x = -this.container.x + paddingLeft
} else if (rightCorner > Math.abs(this.container.x) + this.opts.maxWidth - paddingRight) {
// right border
it.x = Math.abs(this.container.x) + this.opts.maxWidth - it.width - paddingRight
} else {
it.x = it.__originalPosition.x
}
reverseCounter--
sorted.push(it)
})
// z-index
sorted
.sort((a, b) => {
const delta = Math.abs(this.container.x) + this.opts.maxWidth / 2
const distanceA = Math.abs(a.x - delta)
const distanceB = Math.abs(b.x - delta)
if (distanceA > distanceB) {
return -1
} else if (distanceB > distanceA) {
return 1
} else {
if (a.__initIndex > b.__initIndex) {
return -1
} else if (b.__initIndex > a.__initIndex) {
return 1
} else {
return 0
}
}
})
.forEach(it => it.parent.addChild(it))
}
/**
*
*/
_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.height
const paddingTop = index * this.opts.stackPadding
const paddingBottom = reverseCounter * this.opts.stackPadding
if (topCorner &lt; paddingTop) {
// top border
it.y = -this.container.y + paddingTop
} else if (bottomCorner > Math.abs(this.container.y) + this.opts.maxHeight - paddingBottom) {
// bottom border
it.y = Math.abs(this.container.y) + this.opts.maxHeight - it.height - paddingBottom
} else {
it.y = it.__originalPosition.y
}
reverseCounter--
sorted.push(it)
})
// z-index
sorted
.sort((a, b) => {
const delta = Math.abs(this.container.y) + this.opts.maxHeight / 2
const distanceA = Math.abs(a.y - delta)
const distanceB = Math.abs(b.y - delta)
if (distanceA > distanceB) {
return -1
} else if (distanceB > distanceA) {
return 1
} else {
if (a.__initIndex > b.__initIndex) {
return -1
} else if (b.__initIndex > a.__initIndex) {
return 1
} else {
return 0
}
}
})
.forEach(it => it.parent.addChild(it))
}
}
</code></pre>
</article>
@@ -1824,7 +2103,7 @@ export default class ButtonGroup extends PIXI.Graphics {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on 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>