Životní cyklus layoutu a renderu
Pochopení toho, jak TUIX Core počítá layout a renderuje komponenty, je klíčové pro efektivní terminálové UI. Tato stránka popisuje životní cyklus od engine.render.draw() až po výstup na obrazovku.
Přehled render cyklu
- Vyčištění obrazovky — os.system('cls'/'clear') vymaže terminál
- Výpočet layoutu — LayoutEngine._compute_all() načte velikost terminálu a spočítá pozice pro všechny komponenty
- Render komponent — RenderEngine vykreslí okraje, text labelu a interaktivní tlačítka
- Input smyčka — InputHandler.listen() spustí blokující smyčku pro navigaci klávesnicí
- Přerenderování při změně — stisky šipek spustí RenderEngine._refresh(), který vymaže a znovu vykreslí
Výpočet layoutu
LayoutEngine při každém renderu načítá aktuální velikost terminálu přes shutil.get_terminal_size(). Proporční modifikátory (0.0–1.0) převádí na reálné znakové souřadnice. U každé komponenty se spočítá x, y (šířka/výška ve znacích), margin_top, margin_left a rohové souřadnice.
Custom vs centered okraje
V režimu 'custom' se okraje počítají jako modifier * terminal_size. V režimu 'centered' se okraje dopočítají jako (terminal_size - component_size) // 2, což umístí komponentu do středu terminálu.
Vypočtené layout vlastnosti
| Vlastnost | Popis |
|---|---|
| x | Šířka komponenty ve znacích (width_modifier * terminal_cols) |
| y | Výška komponenty ve znacích (height_modifier * terminal_rows) |
| margin_top | Horní odsazení v řádcích (dle režimu) |
| margin_left | Levé odsazení ve sloupcích (dle režimu) |
| corners.top_left | Trojice (sloupec, řádek) levého horního rohu |
| corners.bottom_right | Trojice (sloupec, řádek) pravého dolního rohu |
Render fáze
RenderEngine vykresluje komponentu pomocí Unicode box-drawing znaků (━, ┃, ┏, ┓, ┗, ┛). U choice komponent: (1) vykreslí horní okraj, (2) vykreslí text labelu s word-wrap a centrováním přes _wrap_and_center(), (3) vykreslí interaktivní tlačítka přes _draw_buttons(), (4) vykreslí spodní okraj.
Zalamování textu
Metoda _wrap_and_center() rozdělí text na řádky, které se vejdou do vnitřní šířky komponenty, a poté textový blok horizontálně vycentruje. Respektuje explicitní nové řádky v textu labelu.
Render tlačítek
Metoda _draw_buttons() renderuje choice tlačítka vertikálně zarovnaná a horizontálně centrovaná. Aktuálně vybrané tlačítko je zvýrazněné pomocí barev selected_background a selected_text z aktivního stylu. Dlouhé texty tlačítek se automaticky zalamují podle výpočtů visual_width().
Refresh cyklus
Když uživatel stiskne šipku, InputHandler aktualizuje selected_row a selected_index a zavolá RenderEngine._refresh(). Ten vymaže obrazovku a znovu zavolá draw(), což přepočítá layout a překreslí komponenty s aktualizovaným výběrem.
Vstupní fáze
Po renderu _draw_choice() zavolá engine.input.listen(choices) a spustí blokující input smyčku. InputHandler polluje klávesové události, aktualizuje selected_row a selected_index a spouští _refresh() při každé navigaci. Enter ukončí smyčku.
Shrnutí struktury enginu
TuixEngine agreguje všechny subsystémy:
- engine.styles — spravuje témata a vizuální vlastnosti
- engine.components — spravuje vytváření a aktualizace komponent
- engine.layout — počítá rozměry a pozice
- engine.render — kreslí komponenty do terminálu
- engine.input — zpracovává klávesové události
Data komponent jsou sdílena mezi ComponentAPI a LayoutEngine přes společný slovník objects. Render engine čte vypočtený layout a cache stylů pro výstup do terminálu.
Aktuální omezení
- Plně je implementován pouze render single choice komponenty
- Multi-component layouty vyhazují NotImplementedError
- Žádné částečné/diferenciální aktualizace — plný redraw při každé interakci
- Input podporuje pouze šipky a Enter