tslash.tsx

// tslash.tsx
import { prepare, layout } from '@chenglou/pretext';

export interface Sprite extends HTMLDivElement {
    x: number; y: number; rotation: number;
    scaleX: number; scaleY: number; skewX: number; skewY: number;
    hue: number; saturation: number; brightness: number; contrast: number;
}

class SpriteClass extends HTMLDivElement {
    constructor() {
        super();
        
        // 1. Todas las variables internas de Flash / Esmallin
        let _x = 0, _y = 0, _r = 0;
        let _sx = 1, _sy = 1;
        let _skx = 0, _sky = 0;
        let _h = 0, _sat = 1, _b = 1, _c = 1;

        // 2. Sync unificado (El motor de render)
        const sync = () => {
            // Usamos .toFixed(4) para evitar la notación científica (las "e")
            const x = _x.toFixed(4);
            const y = _y.toFixed(4);
            const r = _r.toFixed(4);
            const sx = _sx.toFixed(4);
            const sy = _sy.toFixed(4);
            const skx = _skx.toFixed(4);
            const sky = _sky.toFixed(4);

            this.style.transform = `translate(${x}px, ${y}px) rotate(${r}deg) scale(${sx}, ${sy}) skew(${skx}deg, ${sky}deg)`;
            
            // Lo mismo para los filtros si quieres ser ultra precavido
            this.style.filter = `hue-rotate(${_h.toFixed(2)}deg) saturate(${_sat.toFixed(2)}) brightness(${_b.toFixed(2)}) contrast(${_c.toFixed(2)})`;
        };


        // 3. Inyección de todos los Setters de AS3
        Object.defineProperties(this, {
            x: { get: () => _x, set: (v) => { _x = v; sync(); } },
            y: { get: () => _y, set: (v) => { _y = v; sync(); } },
            rotation: { get: () => _r, set: (v) => { _r = v; sync(); } },
            scaleX: { get: () => _sx, set: (v) => { _sx = v; sync(); } },
            scaleY: { get: () => _sy, set: (v) => { _sy = v; sync(); } },
            skewX: { get: () => _skx, set: (v) => { _skx = v; sync(); } },
            skewY: { get: () => _sky, set: (v) => { _sky = v; sync(); } },
            hue: { get: () => _h, set: (v) => { _h = v; sync(); } },
            saturation: { get: () => _sat, set: (v) => { _sat = v; sync(); } },
            brightness: { get: () => _b, set: (v) => { _b = v; sync(); } },
            contrast: { get: () => _c, set: (v) => { _c = v; sync(); } }
        });

        // 4. Configuración base de estilo
        this.style.position = 'absolute';
        sync();
    }
}

customElements.define('ts-sprite', SpriteClass, { extends: 'div' });

export const Sprite = function() {
    return document.createElement('div', { is: 'ts-sprite' });
} as any as { new(): Sprite };


export interface Text extends HTMLSpanElement {
    x: number; y: number; rotation: number;
    scaleX: number; scaleY: number; 
    hue: number; brightness: number;
    text: string; // <-- Nuestra propiedad especial de Flash
}

class TextClass extends HTMLSpanElement {
    constructor() {
        super();
        // 1. Variables internas completas (como en Sprite)
        let _x = 0, _y = 0, _r = 0, _sx = 1, _sy = 1, _skx = 0, _sky = 0;
        let _h = 0, _sat = 1, _b = 1, _c = 1;

        const sync = () => {
            this.style.transform = `translate(${_x.toFixed(4)}px, ${_y.toFixed(4)}px) rotate(${_r.toFixed(4)}deg) scale(${_sx.toFixed(4)}, ${_sy.toFixed(4)}) skew(${_skx.toFixed(4)}deg, ${_sky.toFixed(4)}deg)`;
            this.style.filter = `hue-rotate(${_h.toFixed(2)}deg) saturate(${_sat.toFixed(2)}) brightness(${_b.toFixed(2)}) contrast(${_c.toFixed(2)})`;
        };

        Object.defineProperties(this, {
            x: { get: () => _x, set: (v) => { _x = v; sync(); } },
            y: { get: () => _y, set: (v) => { _y = v; sync(); } },
            rotation: { get: () => _r, set: (v) => { _r = v; sync(); } },
            scaleX: { get: () => _sx, set: (v) => { _sx = v; sync(); } },
            scaleY: { get: () => _sy, set: (v) => { _sy = v; sync(); } },
            skewX: { get: () => _skx, set: (v) => { _skx = v; sync(); } },
            skewY: { get: () => _sky, set: (v) => { _sky = v; sync(); } },
            hue: { get: () => _h, set: (v) => { _h = v; sync(); } },
            saturation: { get: () => _sat, set: (v) => { _sat = v; sync(); } },
            brightness: { get: () => _b, set: (v) => { _b = v; sync(); } },
            contrast: { get: () => _c, set: (v) => { _c = v; sync(); } },
            text: { get: () => this.innerText, set: (v) => { this.innerText = v; } }
        });

        this.style.position = 'absolute';
        this.style.whiteSpace = 'nowrap';
        this.style.display = 'inline-block';
        this.style.pointerEvents = 'auto';
        this.style.userSelect = 'none';
        sync();
    }
}

customElements.define('ts-text', TextClass, { extends: 'span' });

export const Text = function(content: string = "") {
    const t = document.createElement('span', { is: 'ts-text' }) as Text;
    t.text = content;
    return t;
} as any as { new(content?: string): Text };

// 1. Cambiamos el nombre de la interfaz para evitar colisión con el valor
export interface IBetterText extends HTMLDivElement {
    x: number; y: number; rotation: number;
    scaleX: number; scaleY: number;
    text: string;
    width: number;
    fontSize: number;
    lineHeight: number;
}

class BetterTextClass extends HTMLDivElement {
    // 1. Estado interno completo
    private _x = 0; private _y = 0; private _r = 0;
    private _sx = 1; private _sy = 1;
    private _skx = 0; private _sky = 0; // Skew
    private _h = 0; private _sat = 1; private _b = 1; private _c = 1; // Filtros
    
    private _text = "";
    private _width = 200;
    private _fontSize = 16;
    private _lineHeight = 20;
    private _prepared: any = null;

    constructor() {
        super();
        this.style.position = 'absolute';
        this.style.whiteSpace = 'pre-wrap'; 
        this.style.wordBreak = 'break-word';
        this.style.display = 'block';
        this.style.overflow = 'hidden';
        this.syncTransform(); // Render inicial
    }

    // 2. Setters de Transformación
    get x() { return this._x; }
    set x(v: number) { this._x = v; this.syncTransform(); }

    get y() { return this._y; }
    set y(v: number) { this._y = v; this.syncTransform(); }

    get rotation() { return this._r; }
    set rotation(v: number) { this._r = v; this.syncTransform(); }

    get scaleX() { return this._sx; }
    set scaleX(v: number) { this._sx = v; this.syncTransform(); }

    get scaleY() { return this._sy; }
    set scaleY(v: number) { this._sy = v; this.syncTransform(); }

    get skewX() { return this._skx; }
    set skewX(v: number) { this._skx = v; this.syncTransform(); }

    get skewY() { return this._sky; }
    set skewY(v: number) { this._sky = v; this.syncTransform(); }

    // 3. Setters de Filtros (Color)
    get hue() { return this._h; }
    set hue(v: number) { this._h = v; this.syncTransform(); }

    get saturation() { return this._sat; }
    set saturation(v: number) { this._sat = v; this.syncTransform(); }

    get brightness() { return this._b; }
    set brightness(v: number) { this._b = v; this.syncTransform(); }

    get contrast() { return this._c; }
    set contrast(v: number) { this._c = v; this.syncTransform(); }

    // 4. Propiedades de Texto
    get text() { return this._text; }
    set text(v: string) { 
        this._text = v; 
        this._prepared = null; 
        this.updateLayout(); 
    }

    get width() { return this._width; }
    set width(v: number | any) {
        this._width = typeof v === 'string' ? parseFloat(v) : v;
        this.updateLayout(); 
    }

    // 5. El Motor Unificado
    private syncTransform() {
        // Transformación espacial
        this.style.transform = `translate(${this._x.toFixed(4)}px, ${this._y.toFixed(4)}px) ` +
                               `rotate(${this._r.toFixed(4)}deg) ` +
                               `scale(${this._sx.toFixed(4)}, ${this._sy.toFixed(4)}) ` +
                               `skew(${this._skx.toFixed(4)}deg, ${this._sky.toFixed(4)}deg)`;
        
        // Post-procesamiento de color
        this.style.filter = `hue-rotate(${this._h.toFixed(2)}deg) ` +
                            `saturate(${this._sat.toFixed(2)}) ` +
                            `brightness(${this._b.toFixed(2)}) ` +
                            `contrast(${this._c.toFixed(2)})`;
    }


    private updateLayout() {
        if (!this._text) {
            this.innerText = "";
            return;
        }

        const font = `${this._fontSize}px Arial, sans-serif`;
        if (!this._prepared) {
            this._prepared = prepare(this._text, font);
        }

        const result = layout(this._prepared, this._width, this._lineHeight) as any;
        
        this.innerText = this._text; 

        this.style.height = `${result.height || 20}px`;
        this.style.width = `${this._width}px`;
    }
}

customElements.define('ts-better-text', BetterTextClass, { extends: 'div' });

// 2. Exportamos el constructor con el tipo correcto (IBetterText)
export const BetterText = function(content: string = "") {
    const t = document.createElement('div', { is: 'ts-better-text' }) as IBetterText;
    if (content) t.text = content;
    return t;
} as any as { new(content?: string): IBetterText };