@mai3/phaser-sdk/dist/ui/Tabs.js

A UI component library based on the Phaser game engine

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import { Container } from './Container';
import { LinearLayout } from './LinearLayout';
import { Text } from './Text';
import { Panel } from './Panel';
var Tabs = /** @class */ (function (_super) {
    __extends(Tabs, _super);
    function Tabs(scene, config) {
        var _a, _b;
        var _this = _super.call(this, scene, config) || this;
        _this._config = config;
        _this.Type = 'Tabs';
        _this.createBg();
        _this.createTabItems();
        _this.setPosition(0, scene.scale.height - (_this._config.height || 0));
        _this.setDepth((_b = (_a = _this._config) === null || _a === void 0 ? void 0 : _a.depth) !== null && _b !== void 0 ? _b : 1);
        return _this;
    }
    Tabs.prototype.createBg = function () {
        var _a = this._config, width = _a.width, _b = _a.height, height = _b === void 0 ? 0 : _b, _c = _a.texture, texture = _c === void 0 ? '' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 0x000000 : _d;
        var tabsWidth = width || this.scene.scale.width;
        if (texture) {
            this._root = new Panel(this.scene, {
                x: 0, y: 0,
                width: tabsWidth,
                height: height,
                texture: texture
            });
        }
        else {
            this._root = new Panel(this.scene, {
                x: 0, y: 0,
                width: tabsWidth,
                height: height,
                backgroundColor: backgroundColor,
                borderWidth: 0,
                radius: 0
            });
        }
        this._root.setName("root");
        this._root.drawBackground();
        this.addAt(this._root, 1);
    };
    Tabs.prototype.createTabItems = function (tabIndex) {
        var _this = this;
        var _a, _b, _c, _d;
        if (tabIndex === void 0) { tabIndex = 0; }
        (_a = this._items) === null || _a === void 0 ? void 0 : _a.destroy();
        var children = [];
        var itemCount = ((_b = this._config.items) === null || _b === void 0 ? void 0 : _b.length) || 0;
        var tabsWidth = this._config.width || this.scene.scale.width;
        var itemWidth = tabsWidth / itemCount;
        var padding = ((_c = this._config.padding) === null || _c === void 0 ? void 0 : _c.all) || 0;
        var configHeight = this._config.height || 40;
        var multiple = 0.8;
        (_d = this._config.items) === null || _d === void 0 ? void 0 : _d.forEach(function (item, index) {
            var _a, _b, _c;
            var itemRoot = new Container(_this.scene);
            var rectangle = _this.scene.add.rectangle(0, 0, itemWidth, configHeight);
            rectangle.setOrigin(0);
            itemRoot.addAt(rectangle, 0);
            var image;
            if (tabIndex == index) {
                image = _this.scene.add.image(padding, padding, (_b = (_a = item.activeImg) !== null && _a !== void 0 ? _a : item.texture) !== null && _b !== void 0 ? _b : '');
                image.setOrigin(0);
            }
            else {
                image = _this.scene.add.image(padding, padding, (_c = item.texture) !== null && _c !== void 0 ? _c : '');
                image.setOrigin(0);
            }
            // 以高度等比缩放，默认显示0.8倍
            var imgSize = configHeight * multiple - padding * 2;
            image.setDisplaySize(imgSize, imgSize);
            image.x = (itemWidth - imgSize) / 2;
            itemRoot.addAt(image, 1);
            var text = new Text(_this.scene, {
                x: 0,
                y: configHeight * multiple - padding,
                width: itemWidth,
                text: item.title,
                textStyle: {
                    color: _this._config.fontColor, // 颜色
                    fontSize: (configHeight - configHeight * multiple) * multiple + 'px'
                },
                textAlign: 'center',
            });
            itemRoot.addAt(text, 1);
            var hitArea = new Phaser.Geom.Rectangle(0, 0, itemWidth, configHeight);
            itemRoot.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains)
                .on('pointerup', function () { return _this.onTabClick(index); });
            children.push(itemRoot);
        });
        this._items = new LinearLayout(this.scene, {
            width: tabsWidth,
            height: this._config.height,
            children: children,
            orientation: 'horizontal',
        });
        this.add(this._items);
    };
    Tabs.prototype.onTabClick = function (index) {
        if (this._config.onTabClick) {
            this._config.onTabClick(index);
        }
        this.emit('tabChange', index);
        this.createTabItems(index);
    };
    return Tabs;
}(Container));
export { Tabs };