- import Theme from './theme.js'
+ /* 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' &&
- button.opts.type === 'default'
- ) {
+ if (this.opts.type === 'radio' && 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 && (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 && (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 && distanceToLeft > distanceToRight) {
+ 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) {
+ throwProps.y.end = 0
+ } else if (distanceToBottom > 0 && 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 < 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)
+ }
+
+ /**
+ *
+ */
+ 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 < 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 < 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))
+ }
}
@@ -1824,7 +2103,7 @@ export default class ButtonGroup extends PIXI.Graphics {