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

Working on stacked buttons.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-30 16:56:29 +02:00
parent 0bcf931465
commit 5f46b4feae
115 changed files with 3277 additions and 5134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/button.js
+42 -79
View File
@@ -1,8 +1,9 @@
/* global PIXI TweenLite */
/* 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.
@@ -156,15 +157,9 @@ export default class Button extends PIXI.Container {
this.id = this.opts.id
if (
typeof this.opts.icon === 'undefined' &&
typeof this.opts.iconActive !== 'undefined'
) {
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
this.opts.icon = this.opts.iconActive
} else if (
typeof this.opts.icon !== 'undefined' &&
typeof this.opts.iconActive === 'undefined'
) {
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
this.opts.iconActive = this.opts.icon
}
@@ -180,6 +175,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
@@ -234,17 +231,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
@@ -272,6 +263,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'
@@ -280,25 +273,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 < 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)
}
}
})
@@ -319,11 +317,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)
}
}
@@ -353,15 +347,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) {
@@ -369,15 +358,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)
@@ -516,8 +500,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
}
@@ -529,8 +512,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
}
@@ -546,30 +528,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
@@ -686,9 +651,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)