// viewport.ts — PixiJS viewport wrapper with camera controls
import { Application, Container, Graphics } from 'pixi.js';
export class WorldViewport {
    app;
    world;
    gridOverlay = null;
    _showGrid = true;
    _zoom = 1;
    _panX = 0;
    _panY = 0;
    opts;
    constructor(opts) {
        this.opts = opts;
        this.app = new Application();
        this.world = new Container();
    }
    async init(container) {
        await this.app.init({
            width: this.opts.width,
            height: this.opts.height,
            backgroundColor: this.opts.backgroundColor ?? 0x1a1a2e,
            antialias: true,
            resizeTo: container,
        });
        container.appendChild(this.app.canvas);
        this.app.stage.addChild(this.world);
        this.drawGrid();
    }
    drawGrid() {
        if (this.gridOverlay) {
            this.world.removeChild(this.gridOverlay);
            this.gridOverlay.destroy();
        }
        if (!this._showGrid)
            return;
        const g = new Graphics();
        const { gridWidth, gridHeight, tileSize } = this.opts;
        g.setStrokeStyle({ width: 1, color: 0x333333, alpha: 0.3 });
        for (let x = 0; x <= gridWidth; x++) {
            g.moveTo(x * tileSize, 0);
            g.lineTo(x * tileSize, gridHeight * tileSize);
        }
        for (let y = 0; y <= gridHeight; y++) {
            g.moveTo(0, y * tileSize);
            g.lineTo(gridWidth * tileSize, y * tileSize);
        }
        g.stroke();
        this.gridOverlay = g;
        this.world.addChildAt(g, 0);
    }
    pan(dx, dy) {
        this._panX += dx;
        this._panY += dy;
        this.world.position.set(this._panX, this._panY);
    }
    zoom(factor) {
        this._zoom = Math.max(0.1, Math.min(5, this._zoom * factor));
        this.world.scale.set(this._zoom);
    }
    centerOnTile(gridX, gridY) {
        const { tileSize } = this.opts;
        const cx = this.app.screen.width / 2;
        const cy = this.app.screen.height / 2;
        this._panX = cx - gridX * tileSize * this._zoom;
        this._panY = cy - gridY * tileSize * this._zoom;
        this.world.position.set(this._panX, this._panY);
    }
    set showGrid(v) {
        this._showGrid = v;
        this.drawGrid();
    }
    get showGrid() {
        return this._showGrid;
    }
    get zoomLevel() {
        return this._zoom;
    }
    destroy() {
        this.app.destroy(true);
    }
}
//# sourceMappingURL=viewport.js.map