@fuwu-yuan/bgew/dist/lib/engine/entities/button.js

Baguette Game Engine Web is a french 2D Web game engine

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const entity_1 = require("../entity");
class Button extends entity_1.Entity {
    constructor(x, y, width, height, text = "") {
        super(x, y, width, height);
        this._fontFamily = "sans-serif";
        // Normal
        this._strokeColor = "rgba(0,0,0, 1.0)";
        this._fillColor = "rgba(255, 255, 255, 0.0)";
        this._fontSize = 20;
        this._fontColor = "rgba(0,0,0, 1.0)";
        // Hover
        this._hoverStrokeColor = "";
        this._hoverFillColor = "";
        this._hoverFontSize = 0;
        this._hoverFontColor = "";
        this._hoverCursor = "";
        // Click
        this._clickStrokeColor = "";
        this._clickFillColor = "";
        this._clickFontSize = 0;
        this._clickFontColor = "";
        this._clicked = false;
        // Disabled
        this._disabledStrokeColor = "";
        this._disabledFillColor = "";
        this._disabledFontSize = 0;
        this._disabledFontColor = "";
        // Other
        this._radius = { tl: 0, tr: 0, br: 0, bl: 0 };
        this.onMouseEvent("mousedown", this.onMouseDown.bind(this));
        this.onMouseEvent("mouseup", this.onMouseUp.bind(this));
        this.onMouseEvent("mouseenter", this.onMouseEnter.bind(this));
        this.onMouseEvent("mouseleave", this.onMouseLeave.bind(this));
        this._text = text;
    }
    onMouseDown(event) {
        this._clicked = true;
    }
    onMouseUp(event) {
        this._clicked = false;
    }
    onMouseEnter(event) {
        var _a;
        if (this._hoverCursor !== "")
            (_a = this.board) === null || _a === void 0 ? void 0 : _a.changeCursor(this._hoverCursor);
    }
    onMouseLeave(event) {
        var _a;
        if (this._hoverCursor !== "")
            (_a = this.board) === null || _a === void 0 ? void 0 : _a.restoreCursor();
    }
    get clicked() {
        return this._clicked;
    }
    set clicked(clicked) {
        this._clicked = clicked;
    }
    get text() {
        return this._text;
    }
    set text(value) {
        this._text = value;
    }
    draw(ctx) {
        super.draw(ctx);
        //set color
        ctx.strokeStyle = this.strokeColor;
        ctx.fillStyle = this.fillColor;
        if (this.disabled) {
            if (this.disabledStrokeColor !== "")
                ctx.strokeStyle = this.disabledStrokeColor;
            if (this.disabledFillColor !== "")
                ctx.fillStyle = this.disabledFillColor;
        }
        else if (this.clicked) {
            if (this.clickStrokeColor !== "")
                ctx.strokeStyle = this.clickStrokeColor;
            if (this.clickFillColor !== "")
                ctx.fillStyle = this.clickFillColor;
        }
        else if (this.hovered) {
            if (this.hoverStrokeColor !== "")
                ctx.strokeStyle = this.hoverStrokeColor;
            if (this.hoverFillColor !== "")
                ctx.fillStyle = this.hoverFillColor;
        }
        //draw button
        ctx.beginPath();
        ctx.moveTo(this.x + this.radius.tl, this.y);
        ctx.lineTo(this.x + this.width - this.radius.tr, this.y);
        ctx.quadraticCurveTo(this.x + this.width, this.y, this.x + this.width, this.y + this.radius.tr);
        ctx.lineTo(this.x + this.width, this.y + this.height - this.radius.br);
        ctx.quadraticCurveTo(this.x + this.width, this.y + this.height, this.x + this.width - this.radius.br, this.y + this.height);
        ctx.lineTo(this.x + this.radius.bl, this.y + this.height);
        ctx.quadraticCurveTo(this.x, this.y + this.height, this.x, this.y + this.height - this.radius.bl);
        ctx.lineTo(this.x, this.y + this.radius.tl);
        ctx.quadraticCurveTo(this.x, this.y, this.x + this.radius.tl, this.y);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        //text options
        var fontSize = this.fontSize;
        ctx.strokeStyle = this.strokeColor;
        ctx.fillStyle = this.fontColor;
        if (this.disabled) {
            if (this.disabledFontSize > 0)
                fontSize = this.disabledFontSize;
            if (this.disabledFontColor !== "")
                ctx.fillStyle = this.disabledFontColor;
        }
        else if (this.clicked) {
            if (this.clickFontSize > 0)
                fontSize = this.clickFontSize;
            if (this.clickFontColor !== "")
                ctx.fillStyle = this.clickFontColor;
        }
        else if (this.hovered) {
            if (this.hoverFontSize > 0)
                fontSize = this.hoverFontSize;
            if (this.hoverFontColor !== "")
                ctx.fillStyle = this.hoverFontColor;
        }
        ctx.font = fontSize + "px " + this.fontFamily;
        //text position
        let debugFontSize = fontSize - 4;
        var textSize = ctx.measureText(this._text);
        var textX = this.x + (this.width / 2) - (textSize.width / 2);
        var textY = this.y + debugFontSize + (this.height / 2) - (debugFontSize / 2);
        //draw the text
        ctx.fillText(this._text, textX, textY);
    }
    update(delta) {
        super.update(delta);
    }
    /*********************
     * Getters & Setters *
     *********************/
    get hoverFillColor() { return this._hoverFillColor; }
    set hoverFillColor(value) { this._hoverFillColor = value; }
    get hoverStrokeColor() { return this._hoverStrokeColor; }
    set hoverStrokeColor(value) { this._hoverStrokeColor = value; }
    get fillColor() { return this._fillColor; }
    set fillColor(value) { this._fillColor = value; }
    get strokeColor() { return this._strokeColor; }
    set strokeColor(value) { this._strokeColor = value; }
    get clickFillColor() { return this._clickFillColor; }
    set clickFillColor(value) { this._clickFillColor = value; }
    get clickStrokeColor() { return this._clickStrokeColor; }
    set clickStrokeColor(value) { this._clickStrokeColor = value; }
    get clickFontColor() { return this._clickFontColor; }
    set clickFontColor(value) { this._clickFontColor = value; }
    get hoverFontColor() { return this._hoverFontColor; }
    set hoverFontColor(value) { this._hoverFontColor = value; }
    get fontColor() { return this._fontColor; }
    set fontColor(value) { this._fontColor = value; }
    get fontSize() { return this._fontSize; }
    set fontSize(value) { this._fontSize = value; }
    get clickFontSize() { return this._clickFontSize; }
    set clickFontSize(value) { this._clickFontSize = value; }
    get hoverFontSize() { return this._hoverFontSize; }
    set hoverFontSize(value) { this._hoverFontSize = value; }
    get radius() { return this._radius; }
    set radius(value) { this._radius = value; }
    get hoverCursor() { return this._hoverCursor; }
    set hoverCursor(value) { this._hoverCursor = value; }
    get disabledStrokeColor() { return this._disabledStrokeColor; }
    set disabledStrokeColor(value) { this._disabledStrokeColor = value; }
    get disabledFillColor() { return this._disabledFillColor; }
    set disabledFillColor(value) { this._disabledFillColor = value; }
    get disabledFontSize() { return this._disabledFontSize; }
    set disabledFontSize(value) { this._disabledFontSize = value; }
    get disabledFontColor() { return this._disabledFontColor; }
    set disabledFontColor(value) { this._disabledFontColor = value; }
    get fontFamily() { return this._fontFamily; }
    set fontFamily(value) { this._fontFamily = value; }
}
exports.Button = Button;