Newer
Older
rpg / packages / engine / src / ui / Panel.ts
import { Container, Graphics, Texture, NineSliceSprite } from 'pixi.js';

/**
 * Панель UI: тёмный прямоугольник с однопиксельной рамкой — базовый стиль движка.
 * Если передана текстура, рисуется NineSliceSprite (растяжимые углы 4px).
 */
export interface PanelOptions {
    width: number;
    height: number;
    fill?: number;
    border?: number;
    /** Прозрачность заливки 0..1. */
    fillAlpha?: number;
    /** Текстура 9-slice (опционально). */
    texture?: Texture;
}

export class Panel extends Container {
    constructor(options: PanelOptions) {
        super();
        if (options.texture) {
            const nine = new NineSliceSprite({
                texture: options.texture,
                leftWidth: 4,
                topHeight: 4,
                rightWidth: 4,
                bottomHeight: 4,
                width: options.width,
                height: options.height
            });
            this.addChild(nine);
            return;
        }

        const g = new Graphics();
        g.rect(0, 0, options.width, options.height)
            .fill({ color: options.fill ?? 0x101018, alpha: options.fillAlpha ?? 0.92 });
        g.rect(0, 0, options.width, options.height)
            .stroke({ color: options.border ?? 0x8899aa, width: 1 });
        this.addChild(g);
    }
}