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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExperimentalInputtext = exports.Inputtext = void 0;
const entity_1 = require("../entity");
const Dispatcher_1 = require("../../classes/Dispatcher");
class Inputtext extends entity_1.Entity {
    constructor(x, y, width, height, text = "") {
        super(x, y, width, height);
        this._inputDispatcher = new Dispatcher_1.Dispatcher();
        // Padding
        this._padding = { top: 2, left: 2, right: 2, bottom: 2 };
        // Normal
        this._strokeColor = "rgba(255,255,255, 1.0)";
        this._fillColor = "rgba(0, 0, 0, 0.0)";
        this._fontSize = 20;
        this._fontColor = "rgba(255,255,255, 1.0)";
        // Focus
        this._focusStrokeColor = "";
        this._focusFillColor = "";
        this._focusFontSize = 0;
        this._focusFontColor = "";
        // 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 = "";
        // Placeholder
        this._placeholderFontColor = "gray";
        // Other
        this._radius = { tl: 0, tr: 0, br: 0, bl: 0 };
        this._input = this.createInput(text);
        for (const event of ["onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onclick", "ondblclick"]) {
            // @ts-ignore
            this._input[event] = (evt) => {
                this.dispatcher.dispatch(evt.type, evt);
            };
        }
        this._input.onchange = ev => this._inputDispatcher.dispatch("change", ev);
        this._input.onfocus = ev => this._inputDispatcher.dispatch("focus", ev);
        this._input.onblur = ev => this._inputDispatcher.dispatch("blur", ev);
    }
    onchange(cb) {
        this._inputDispatcher.on("change", cb);
    }
    onfocus(cb) {
        this._inputDispatcher.on("focus", cb);
    }
    onblur(cb) {
        this._inputDispatcher.on("blur", cb);
    }
    createInput(text) {
        let input = document.createElement("input");
        input.style.display = this.visible ? "block" : "none";
        input.style.boxSizing = "border-box";
        input.style.position = "absolute";
        input.style.width = this.width - 2 + "px";
        input.style.height = this.height - 2 + "px";
        input.style.background = "transparent";
        input.style.margin = "0";
        input.style.padding = "0";
        input.className = "generated-input";
        input.value = text;
        return input;
    }
    init(board) {
        super.init(board);
        board.gameHTMLElement.append(this._input);
    }
    draw(ctx) {
        super.draw(ctx);
    }
    onDestroy() {
        var _a;
        super.onDestroy();
        (_a = this.board) === null || _a === void 0 ? void 0 : _a.gameHTMLElement.removeChild(this._input);
    }
    update(delta) {
        super.update(delta);
        if (this.board) {
            var rect = this.board.canvas.getBoundingClientRect();
            var position = {
                top: 0,
                left: 0 //rect.left + window.pageXOffset/* + this.board.gameHTMLElement.scrollLeft*/
            };
            this._input.style.display = this.visible ? "block" : "none";
            this._input.style.left = position.left + this.absX * this.board.scale - 1 + "px";
            this._input.style.top = position.top + this.absY * this.board.scale - 1 + "px";
            this._input.style.width = this.width * this.board.scale - 2 + "px";
            this._input.style.height = this.height * this.board.scale - 2 + "px";
            this._input.style.border = `solid ${this.board.scale}px ${this._strokeColor}`;
            this._input.style.background = this._fillColor;
            this._input.style.fontSize = this._fontSize * this.board.scale + "px";
            this._input.style.color = this._fontColor;
            this._input.style.padding = `${this._padding.top * this.board.scale}px ${this._padding.right * this.board.scale}px ${this._padding.bottom * this.board.scale}px ${this._padding.left * this.board.scale}px`;
        }
        //TODO Focus / Hover / Click / Disabled
    }
    set text(value) {
        this._input.value = value;
    }
    get text() {
        return this._input.value;
    }
    get placeholder() {
        return this._input.placeholder;
    }
    set placeholder(value) {
        this._input.placeholder = value;
    }
    /*********************
     * Getters & Setters *
     *********************/
    get padding() { return this._padding; }
    set padding(value) { this._padding = value; }
    get focusStrokeColor() { return this._focusStrokeColor; }
    set focusStrokeColor(value) { this._focusStrokeColor = value; }
    get focusFillColor() { return this._focusFillColor; }
    set focusFillColor(value) { this._focusFillColor = value; }
    get focusFontSize() { return this._focusFontSize; }
    set focusFontSize(value) { this._focusFontSize = value; }
    get focusFontColor() { return this._focusFontColor; }
    set focusFontColor(value) { this._focusFontColor = value; }
    get hoverFillColor() { return this._hoverFillColor; }
    set hoverFillColor(value) { this._hoverFillColor = value; }
    get hoverStrokeColor() { return this._hoverStrokeColor; }
    set hoverStrokeColor(value) { this._hoverStrokeColor = value; }
    get hoverFontColor() { return this._hoverFontColor; }
    set hoverFontColor(value) { this._hoverFontColor = value; }
    get hoverFontSize() { return this._hoverFontSize; }
    set hoverFontSize(value) { this._hoverFontSize = value; }
    get hoverCursor() { return this._hoverCursor; }
    set hoverCursor(value) { this._hoverCursor = value; }
    get fillColor() { return this._fillColor; }
    set fillColor(value) { this._fillColor = value; }
    get strokeColor() { return this._strokeColor; }
    set strokeColor(value) { this._strokeColor = value; }
    get fontColor() { return this._fontColor; }
    set fontColor(value) { this._fontColor = value; }
    get fontSize() { return this._fontSize; }
    set fontSize(value) { this._fontSize = 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 clickFontSize() { return this._clickFontSize; }
    set clickFontSize(value) { this._clickFontSize = 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 radius() { return this._radius; }
    set radius(value) {
        this._radius = value;
        this._input.style.borderRadius = `${value.tl}px ${value.tr}px ${value.br}px ${value.bl}px`;
    }
    get placeholderFontColor() { return this._placeholderFontColor; }
    set placeholderFontColor(value) { this._placeholderFontColor = value; }
}
exports.Inputtext = Inputtext;
/**
 * @deprecated use {@link Inputtext} instead
 */
class ExperimentalInputtext extends Inputtext {
}
exports.ExperimentalInputtext = ExperimentalInputtext;