TUI Layout

Odzivna razporeditev s sidranjem kot privzeto za TUI aplikacije.

Sidranje kot privzeto pomeni:
- Sprememba velikosti terminala ne sme pokvariti razporeditve, fokusa in izrisovanja
- Kontrole ohranjajo stabilne prostorske odnose
- Predvidljiva pravila raztezanja/krčenja

Privzeto: Left + Top
→ Položaj ostane stabilen, velikost konstantna

Left + Right:
→ Širina se raztegne/skrči s širino starša

Top + Bottom:
→ Višina se raztegne/skrči z višino starša

Vsa štiri (Left + Top + Right + Bottom):
→ Pravokotnik se raztegne v obe smeri

Brez sider:
→ Obravnavaj kot Left + Top (brez "lebdeče" dvoumnosti)

<!-- Fiksna pozicija zgoraj levo -->
<Button Anchors="Left,Top" Text="OK" />
 
<!-- Polna širina, fiksna višina -->
<TextEdit Anchors="Left,Top,Right" Height="3" />
 
<!-- Zapolni celotno razpoložljivo območje -->
<ListView Anchors="Left,Top,Right,Bottom" />
 
<!-- Statusna vrstica spodaj -->
<StatusBar Anchors="Left,Right,Bottom" Height="1" />

1. Prejet dogodek spremembe velikosti
   └─ Posodobi razpoložljiv pravokotnik korena

2. Razveljavi razporeditev
   └─ Izvedi prehod Measure/Arrange

3. Ohrani fokus
   └─ Ista logična kontrola ohrani fokus

4. Izriši ponovno
   └─ Paint → DiffFlush

OBVEZNO:
- Enak vhod → Enaka razporeditev
- Brez utripanja pri hitri spremembi velikosti
- Brez pokvarjenega kurzorja
- Fokus ostane na logični kontroli

Opcijski a priporočeni pragovi spremembe velikosti:

<Panel ResponsiveMode="Auto" Breakpoints="80,120">
  <!-- Samodejno prerazporejanje ob preseženi prelomni točki -->
</Panel>

OBVEZNO:
- Prelomne točke NISO "čarovnija" - definiraj v PXAML ali konfiguraciji teme
- Dokumentiraj prelomne točke
- Jasno definiraj obnašanje pri vsaki prelomni točki

Usmerjenost: Navpično ali vodoravno
Otroci se razporedijo zaporedno

<Stack Orientation="Vertical">
  <Label Text="Ime:" />
  <TextEdit />
  <Label Text="E-pošta:" />
  <TextEdit />
</Stack>

Položaji: Left, Top, Right, Bottom, Fill
Otroci se pripnejo na strani, preostanek zapolni sredino

<Dock>
  <MenuBar Dock="Top" />
  <StatusBar Dock="Bottom" />
  <Sidebar Dock="Left" Width="20" />
  <Content Dock="Fill" />
</Dock>

Za pojavna okna, modalna okna, namige
Prekrije druge kontrole
Mora ostati znotraj meja zaslona (prirezano)

<Overlay>
  <Dialog X="10" Y="5" Width="40" Height="10">
    <!-- Vsebina modalnega okna -->
  </Dialog>
</Overlay>

Definiraj vrstice in stolpce
Postavi kontrole v celice

Vrstni red izračuna razporeditve:

1. Razporeditev vsebnika (če eksplicitno)
   └─ Stack/Grid/Dock/Overlay izračuna pravokotnike otrok

2. Uporabi sidra
   └─ Izboljšaj znotraj pravokotnika vsebnika
   └─ Upoštevaj Min/Max
   └─ Ohrani Margins/Padding

3. Obrezovanje nazadnje
   └─ Oreži končne meje

PREDNOSTNO:
- Uporabi vsebnik ScrollViewer
- Naredi vsebino drsljivo

NE kot privzeto:
- Besedilo "skrči, da se prilega"

OBVEZNO:
- Kontrole lahko izrisujejo v manjšem pravokotniku (obrezovanje + tropičje)
- Stanje se ne sme izgubiti

<ScrollViewer Anchors="Left,Top,Right,Bottom">
  <Stack Orientation="Vertical">
    <!-- Dolg seznam kontrol -->
  </Stack>
</ScrollViewer>

OBVEZNO:
- Fokus se sledi prek identitete kontrole (ne položaja na zaslonu)
- Po prerazporeditvi:
  - Če fokusirana kontrola še vedno fokusabilna in vidna → ohrani
  - Sicer: nadomestno na naslednjega fokusabilnega sorojenca v vrstnem redu fokusa

procedure TLayoutEngine.ApplyReflow;
var
  PreviousFocus: TWvdSControl;
begin
  (* Zapomni fokus *)
  PreviousFocus := FocusManager.FocusedControl;
 
  (* Ponovno izračunaj razporeditev *)
  MeasureAndArrange(RootControl);
 
  (* Obnovi fokus *)
  if (PreviousFocus <> nil) and
     PreviousFocus.CanFocus and
     PreviousFocus.IsVisible then
    FocusManager.SetFocus(PreviousFocus)
  else
    FocusManager.FocusNextAvailable;
end;

[ ] Ponavljanje Narrow ↔ Wide: brez utripanja
[ ] Kurzor ni pokvarjen po spremembi velikosti
[ ] Fokus ostane na isti kontroli
[ ] Sidrno raztegnjene kontrole se ne prekrivajo
[ ] Pojavna okna/prekrivanja ostanejo v mejah zaslona

[ ] Razporeditev se pravilno preklopi ob preseženi prelomni točki
[ ] Brez utripanja ob preklopu prelomne točke
[ ] Vse prelomne točke dokumentirane

[ ] Stack pravilno razporedi otroke
[ ] Dock pravilno zapolni (Left, Top, Right, Bottom, Fill)
[ ] Overlay ostane v mejah
[ ] Ugnezdeni vsebniki delujejo

• Pregled TUI razvoja
• TUI Engine
• TUI Controls