import Container from './Container'; import Rect from './Rect'; import Image from './Image'; import Text from './Text'; import Point from './../math/Point'; import Event from './../utils/Event'; class Button extends Container { isDown: boolean; roundBack: boolean; buttonMode: boolean; isOver: boolean; options: any; text: any; icon: any; back: any; container: Container; constructor(back, icon = null, text = null, options = {}) { super(); this.interactive = true; this.buttonMode = true; this.isDown = false; this.isOver = false; this.options = Object.assign({s: 1, os: 1.1, ds: 1.05}, options); this.addChild(this.container = new Container()); if (back.rr) { this.roundBack = true; this.container.addChild(this.back = new Rect(back.tex, {left: 0.3, right: 0.3, s: back.s})); this.back.x = -this.back.W / 2; this.back.y = -this.back.H / 2; } else { this.container.addChild(this.back = Image.Get(back.tex)); if (back.s) this.back.scale = new Point(back.s, back.s); this.back.anchor = new Point(.5, .5); } if (back.c) { this.tint(back.c); } if (back.r) this.back.rotation = back.r; if (back.a) this.back.alpha = back.a; if (icon) { if (icon.rr) { this.container.addChild(this.icon = new Rect(icon.tex, {left: 0.3, right: 0.3, s: icon.s})); this.icon.x = -this.icon.W / 2; this.icon.y = -this.icon.H / 2; if (icon.tint) this.icon.Tint = icon.tint; } else { this.container.addChild(this.icon = Image.Get(icon.tex)); if (icon.tint) this.icon.tint = icon.tint; if (icon.s) this.icon.scale = new Point(icon.s, icon.s); this.icon.anchor = new Point(.5, .5); } } if (text) { this.container.addChild(this.text = new Text(text.text, text)); this.text.offsets = {x: text.rOffsetX, y: text.rOffsetY}; this._updateText(); } this.on('pointerdown', this.h_down) .on('pointerup', this.h_up) .on('pointerupoutside', this.h_outside) .on('pointerover', this.h_over) .on('pointerout', this.h_out); } _updateText() { this.text.x = -this.text.width / 2; this.text.y = -this.text.height * .65; if (this.back.isRect) { this.back.W = this.text.width + (this.text.offsets.x ? this.text.height * this.text.offsets.x : 0); this.back.H = this.text.height + (this.text.offsets.y ? this.text.height * this.text.offsets.y : 0); this.back.x = -this.back.W / 2; this.back.y = -this.back.H / 2; } } move(x, y) { this.x = x; this.y = y; } tint(val) { if (this.roundBack) { this.back.Tint = val; } else { this.back.tint = val; } } set Label(text) { this.text.text = text; this._updateText(); } set IsOver(value) { const scale = value ? this.options.os : this.options.s; this.container.scale = new Point(scale, scale); this.isOver = value; } set IsDown(value) { const scale = value ? this.options.ds : (this.isOver ? this.options.os : this.options.s); this.container.scale = new Point(scale, scale); this.isDown = value; } h_out(e) { this.IsOver = false; } h_over(e) { this.IsOver = true; } h_outside(e) { this.IsOver = false; } h_up(e) { if (this.isDown) { this.emit(Event.BUTTON_CLICK, {e: Event.BUTTON_CLICK}); } this.IsDown = false; } h_down(e) { this.IsDown = true; } } export default Button;