var DrawableButtonStatics = {};
DrawableButtonStatics.MinClickRegionPosition = {"CENTER": 0, "LEFT_ALIGN": 1, "Right_ALIGN": 2}
Engine.DrawableButton = class extends Engine.Drawable
{
constructor(graphicName, text)
{
super();
if (graphicName === undefined) graphicName = "";
if (text === undefined) text = "";
this.onClick = null;
this._isTwoStateToggle = false;
this._isToggle = false;
this._toggled = false;
this.mousedOver = false;
this.disabledFrame = 0;
this.normalFrame = 1;
this.hoverFrame = 2;
this.toggledStateNormalFrame = 3;
this.toggledStateHoverFrame = 4;
this._bySequence = false;
this.matchTextSize = true;
this.constrainText = false;
this.minAutoWidth = 60;
this._enabled = true;
this.desiredFrame = 1;
this.clickRegionDebugClip;
this.showClickRegionDebug = false;
this._minimumClickRegionSize = 40;
this.clickRegionPosition = DrawableButtonStatics.MinClickRegionPosition.CENTER;
this.sized = false;
this.textOffsetX = 0;
this.textOffsetY = -2;
this.shadowOffsetX = 1;
this.shadowOffsetY = 1;
this.showClickHighlight = true;
this.fadeTime = 0.5;
this.highlightFadeTween = new Engine.SimpleTween();
this._text = new Engine.DrawableText;
this._text.setDropShadow();
this.backgroundHighlight = new Engine.Drawable();
this.backgroundHighlight.additive = true;
this.background = new Engine.Drawable();
this.backgroundDelight = new Engine.Drawable();
this.backgroundDelight.x = 2;
this.backgroundDelight.alpha = 0.4;
this.dulled = false;
// this.background.interactive = true;
// this.background.on('pointertap', (event) => { this.clicked(event); } );
// this.background.on('pointerover', (event) => { this.mouseOver(event); } );
// this.background.on('pointerout', (event) => { this.mouseOut(event); } );
// this.background.on('pointerdown', (event) => { this.mouseDown(event); } );
// this.background.on('pointerup', (event) => { this.mouseUp(event); } );
this.background.mouseEnabled = true;
this.background.events.onClick.addListener(this, this.clicked);
this.background.events.onMouseOver.addListener(this, this.mouseOver);
this.background.events.onMouseOut.addListener(this, this.mouseOut);
this.background.events.onMouseDown.addListener(this, this.mouseDown);
this.background.events.onMouseUp.addListener(this, this.mouseUp);
this.iconIsSet = false;
this.iconInset = 3;
this._iconOffsetX = 0;
this._iconOffsetY = 0;
this.icon = null;
this.repeatOnHold = false;
this.repeatOnHoldTime = 0.5;
this.repeatOnHoldRatePerSecond = 4;
this.clickAndHoldTimer = 0;
if (graphicName && graphicName != "")
{
this.init(graphicName, text);
}
}
get text() { return this._text; }
get isTwoStateToggle() { return this._isTwoStateToggle; }
set isTwoStateToggle(value)
{
this._isTwoStateToggle = value;
if (this._isTwoStateToggle) this._isToggle = false;
this._toggled = false;
this.calculateFrame();
}
get isToggle() { return this._isToggle; }
set isToggle(value) {
this._isToggle = value;
if (this._isToggle) this._isTwoStateToggle = false;
this._toggled = false;
this.calculateFrame();
}
get toggled(){ return this._toggled; }
set toggled(value) {
this._toggled = value;
this.calculateFrame();
}
get bySequence() { return this._bySequence; }
set bySequence(value) { this._bySequence = value; this.calculateFrame(); }
calculateFrame()
{
var frame;
if (this.enabled)
{
if (this.isTwoStateToggle)
{
frame = this.toggled ? this.toggledStateNormalFrame : this.normalFrame;
if (this.mousedOver) frame = this.toggled ? this.toggledStateHoverFrame : this.hoverFrame;
}
else
{
frame = this.normalFrame;
if (this.isToggle && !this.toggled) frame = this.disabledFrame;
if (this.mousedOver) frame = this.hoverFrame;
}
}
else
{
frame = this.disabledFrame;
if (this.isToggle && this.toggled) frame = this.normalFrame;
}
if (!this.bySequence)
{
if (frame != this.background.frame) this.background.gotoAndStop(frame);
}
else
{
if (frame != this.background.sequence) this.background.setSequence(frame);
}
}
get enabled() { return this._enabled; }
set enabled(value)
{
this._enabled = value;
this.calculateFrame();
}
init(bgGraphicName, text, font, fontSize)
{
if (text === undefined) text = "";
if (font === undefined) font = "Tiamat";
if (fontSize === undefined) fontSize = 14;
this.name = "Button_" + text;
this.background.onGraphicLoaded.setListener(this, (graphic) => { this.background_OnGraphicLoaded(graphic); });
this.background.setGraphicDataByName(bgGraphicName);
this.setButtonText(text, font, fontSize);
this.addChild(this.background);
this.addChild(this._text);
this.calculateFrame();
}
setBackgroundGraphic(bgGraphicName)
{
this.background.loadFromGraphicName(bgGraphicName);
}
background_OnGraphicLoaded(drawable)
{
this.resizeClickRegion();
}
get minimumClickRegionSize() { return this._minimumClickRegionSize; }
set minimumClickRegionSize(value) { this._minimumClickRegionSize = value; this.resizeClickRegion(); }
resizeClickRegion()
{
if (this.clickRegionDebugClip != null && this.clickRegionDebugClip.parent != null)
{
this.clickRegionDebugClip.parent.removeChild(this.clickRegionDebugClip);
}
var clickRect = this.background.getLocalBounds();
if (clickRect.width < this.minimumClickRegionSize)
{
var difx = this.minimumClickRegionSize - Math.floor(clickRect.width);
if (this.clickRegionPosition == DrawableButtonStatics.MinClickRegionPosition.CENTER)
{
var ratio = (clickRect.left / clickRect.width);
if (Math.abs(clickRect.left) < 5) ratio = -0.5;
var leftDif = Math.floor(ratio * difx);
clickRect.x += leftDif; // difx / 2;
}
else if (this.clickRegionPosition == DrawableButtonStatics.MinClickRegionPosition.LEFT_ALIGN)
{
// DO NOTHING
}
else if (this.clickRegionPosition == DrawableButtonStatics.MinClickRegionPosition.RIGHT_ALIGN)
{
clickRect.x -= difx;
}
clickRect.width = this.minimumClickRegionSize;
}
if (clickRect.height < this.minimumClickRegionSize)
{
var dify = this.minimumClickRegionSize - Math.floor(clickRect.height);
var ratio = (clickRect.top / clickRect.height);
if (Math.abs(clickRect.top) < 5) ratio = -0.5;
var topDif = Math.floor(ratio * dify);
clickRect.y += topDif;// dify / 2;
clickRect.height = this.minimumClickRegionSize;
}
this.background.hitArea = clickRect;
this.fixHighlight();
if (this.showClickRegionDebug)
{
if (this.clickRegionDebugClip == null) this.clickRegionDebugClip = new PIXI.Graphics();
this.background.addChild(this.clickRegionDebugClip);
this.clickRegionDebugClip.x = clickRect.x;
this.clickRegionDebugClip.y = clickRect.y;
this.clickRegionDebugClip.clear();
this.clickRegionDebugClip.beginFill(0xFFFFFF, 0.5);
this.clickRegionDebugClip.drawRect(0, 0, Math.floor(clickRect.width), Math.floor(clickRect.height));
}
}
fixHighlight()
{
if (this.backgroundHighlight.graphicName != this.background.graphicName)
{
this.backgroundHighlight.setGraphicDataByName(this.background.graphicName);
}
if (this.sized)
{
this.backgroundHighlight.setNineRect();
this.backgroundHighlight.additive = true;
this.backgroundHighlight.width = this.background.width;
this.backgroundHighlight.height = this.background.height;
}
}
setButtonText(text, font, fontSize, align)
{
if (font === undefined) font = "Tiamat";
if (fontSize === undefined) fontSize = 14;
if (align === undefined) this._text.setText(text, font, fontSize);
else this._text.setText(text, font, fontSize, align);
var textWidth = this.constrainText ? this._text.textAreaWidth : this._text.width;
this._text.x = this.textOffsetX + (this.background.width - textWidth) / 2;
this._text.y = this.textOffsetY + (this.background.height - this._text.height) / 2;
if (text && text.length > 0 && this.matchTextSize)
{
this.setWidth(Math.floor(Math.max(this.minAutoWidth, this._text.width + 10)));
}
this._text.x = Math.floor(this._text.x);
this._text.y = Math.floor(this._text.y);
}
setDimensions(width, height)
{
if (width === undefined) width = -1;
if (height === undefined) height = -1;
this.setWidth(width);
this.setHeight(height);
}
setWidth(width)
{
this.sized = true;
this.background.setNineRect();
this.background.width = width;
this.backgroundDelight.setAsBox(this.backgroundDelight.graphics, Math.floor(this.background.width) - 3, Math.floor(this.background.height) - 3, Colors.grey, 1);
//this.background.cacheAsBitmap = true;
var textWidth = this._text.width;
this._text.x = this.textOffsetX + (this.background.width - textWidth) / 2;
this._text.y = this.textOffsetY + (this.background.height - this._text.height) / 2;
if (this.iconIsSet)
{
this.setIconSize(Math.floor(this.background.width), Math.floor(this.background.height), this.iconInset);
}
this.resizeClickRegion();
//this._text.x = Math.floor(this._text.x);
//this._text.y = Math.floor(this._text.y);
}
setHeight(height)
{
this.sized = true;
this.background.setNineRect();
this.background.height = height;
this.backgroundDelight.setAsBox(this.backgroundDelight.graphics, Math.floor(this.background.width) - 3, Math.floor(this.background.height) - 3, Colors.grey, 1);
this._text.x = this.textOffsetX + (this.background.width - this._text.width) / 2;
this._text.y = this.textOffsetY + (this.background.height - this._text.height) / 2;
if (this.iconIsSet)
{
this.setIconSize(Math.floor(this.background.width), Math.floor(this.background.height), this.iconInset);
}
this.resizeClickRegion();
//this._text.x = Math.floor(this._text.x);
//this._text.y = Math.floor(this._text.y);
}
get width()
{
return this.background.width;
}
get height()
{
return this.background.height;
}
// ============= Icon Stuff ==========================
get iconOffsetX() { return this._iconOffsetX; }
set iconOffsetX(value) { this._iconOffsetX = value; this.icon.x = this.iconInset + value; }
get iconOffsetY() { return this._iconOffsetY; }
set iconOffsetY(value) { this._iconOffsetY = value; this.icon.y = this.iconInset + value; }
setIcon(icon, inset)
{
if (inset === undefined) inset = 3;
if (this.icon == null) this.icon = new Engine.UniformScaleGraphic();
this.iconInset = inset;
if (Number.isInteger(icon)) { this.icon.setGraphicByID(icon); }
else { this.icon.setGraphicByName(icon); }
this.setIconInternal();
}
setIconInternal()
{
this.setIconSize(Math.floor(this.background.width), Math.floor(this.background.height), this.iconInset);
this.addChild(this.icon);
this.icon.greyscale = !this.enabled;
this.iconIsSet = true;
}
removeIcon()
{
if (this.icon == null) return;
this.removeChild(this.icon);
this.iconIsSet = false;
}
setIconSize(width, height, inset)
{
if (this.icon == null) return;
this.icon.setSize(width - inset * 2, height - inset * 2);
this.icon.x = inset + this.iconOffsetX;
this.icon.y = inset + this.iconOffsetY;
}
// ============= Highlight stuff ==========================
showHighlight()
{
if (this.highlightFadeTween.active) this.highlightFadeTween.stop();
this.backgroundHighlight.gotoAndStop(this.background.frame);
this.backgroundHighlight.alpha = 1;
this.addChildAt(this.backgroundHighlight, this.getChildIndex(this.background) + 1);
}
fadeHighlight()
{
this.highlightFadeTween.init( (a) => { this.backgroundHighlight.alpha = a;}, Engine.SimpleTween.easeLinear, 1, 0, this.fadeTime);
this.highlightFadeTween.onFinish = () => { this.highlightFaded(); };
}
highlightFaded()
{
this.removeChild(this.backgroundHighlight);
}
// ============= Dull stuff ==========================
showDelight()
{
if (this.dulled) return;
this.dulled = true;
if (this.backgroundHighlight.hasParent)
{
this.addChildAt(this.backgroundDelight, this.getChildIndex(this.backgroundHighlight) + 1);
}
else
{
this.addChildAt(this.backgroundDelight, this.getChildIndex(this.background) + 1);
}
}
hideDelight()
{
if (!this.dulled) return;
this.dulled = false;
this.removeChild(this.backgroundDelight);
}
///============== Mouse Events =============================
clicked(d)
{
if (!this.enabled) return;
if (this.isToggle || this.isTwoStateToggle)
{
this.toggled = !this.toggled;
this.mousedOver = false;
this.calculateFrame();
}
if (this.onClick != null) this.onClick();
//Engine.SoundPlayerInstance.playSound(13, 0.5); 13 is baaad
}
mouseOver(d)
{
this.mousedOver = true;
this.calculateFrame();
if (this.enabled) Engine.SoundPlayerInstance.playSound(15, 0.5);
}
mouseDown(d)
{
if (this.enabled && this.showClickHighlight)
{
Engine.Mouse.addEventListener("mouseup", this, this.globalMouseUp);
this.showHighlight();
if (this.repeatOnHold) this.startClickAndHold();
}
}
mouseUp(d)
{
//this.fadeHighlight();
//this.globalMouseUp();
}
globalMouseUp(v)
{
Engine.Mouse.removeEventListener("mouseup", this);
this.fadeHighlight();
if (this.repeatOnHold) this.stopClickAndHold();
}
mouseOut(d)
{
this.mousedOver = false;
this.calculateFrame();
}
startClickAndHold()
{
this.clickAndHoldTimer = 1 / this.repeatOnHoldRatePerSecond;
Engine.EnterFrameManagerInstance.add(this, this.updateClickAndHold);
}
updateClickAndHold(dt)
{
this.clickAndHoldTimer += dt;
if (this.clickAndHoldTimer > this.repeatOnHoldTime + (1 / this.repeatOnHoldRatePerSecond))
{
this.clicked(null);
this.clickAndHoldTimer = this.repeatOnHoldTime;
}
}
stopClickAndHold()
{
Engine.EnterFrameManagerInstance.remove(this);
}
}
