====== TUI Layout ======

Odzivna razporeditev s sidranjem kot privzeto za TUI aplikacije.

<note>Sidranje je **privzet način** - vsaka kontrola se pravilno obnaša ob spremembi velikosti terminala brez posebnih vsebnikov.</note>

===== Osnovno načelo =====

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

===== Semantika sidra =====

==== Razpoložljiva sidra ====

| Sidro | Pomen |
^ Left | Razdalja do levega roba ostane konstantna |
^ Top | Razdalja do zgornjega roba ostane konstantna |
^ Right | Razdalja do desnega roba ostane konstantna |
^ Bottom | Razdalja do spodnjega roba ostane konstantna |

==== Kombinacije ====

<code>
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)
</code>

==== PXAML primeri ====

<code xml>
<!-- 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" />
</code>

===== Obnašanje ob spremembi velikosti =====

==== Potek ob spremembi velikosti ====

<code>
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
</code>

==== Deterministično ====

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

===== Prelomne točke =====

Opcijski a priporočeni pragovi spremembe velikosti:

==== Standardne prelomne točke ====

| Prelomna točka | Širina | Tipična razporeditev |
^ Narrow | < 80 | En stolpec, naloženo |
^ Medium | 80-119 | Stranska vrstica strnjena v zavihke |
^ Wide | >= 120 | Stranska vrstica + vsebina ena ob drugi |

==== PXAML konfiguracija ====

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

==== Pravila prelomnih točk ====

<code>
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
</code>

===== Vsebniki za razporeditev =====

==== Stack ====

<code>
Usmerjenost: Navpično ali vodoravno
Otroci se razporedijo zaporedno
</code>

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

==== Dock ====

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

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

==== Overlay ====

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

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

==== Grid (kasneje) ====

<code>
Definiraj vrstice in stolpce
Postavi kontrole v celice
</code>

===== Prednost sidranja =====

Vrstni red izračuna razporeditve:

<code>
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
</code>

===== Drsenje in vidno polje =====

==== Ko je vsebina večja od območja ====

<code>
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
</code>

==== Primer ScrollViewer ====

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

===== Fokus ob prerazporeditvi =====

<code>
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
</code>

==== Stabilnost fokusa ====

<code pascal>
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;
</code>

===== Preverjanje =====

==== Testi spremembe velikosti ====

<code>
[ ] 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
</code>

==== Testi prelomnih točk ====

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

==== Testi vsebnikov ====

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

===== PXAML referenca =====

==== Atributi kontrol ====

| Atribut | Vrednosti | Pomen |
^ Anchors | Left,Top,Right,Bottom | Kombinacije sider |
^ Margin | "l,t,r,b" ali "vse" | Zunanji odmik |
^ Padding | "l,t,r,b" ali "vse" | Notranji odmik |
^ MinWidth | Integer | Minimalna širina |
^ MaxWidth | Integer | Maksimalna širina |
^ MinHeight | Integer | Minimalna višina |
^ MaxHeight | Integer | Maksimalna višina |

==== Atributi vsebnikov ====

| Atribut | Vrednosti | Pomen |
^ ResponsiveMode | Auto, Manual | Samodejno rokovanje s prelomnimi točkami |
^ Breakpoints | "w1,w2,..." | Širine prelomnih točk |

===== Glejte tudi =====

  * [[.:tui-entwicklung|Pregled TUI razvoja]]
  * [[.:tui-engine|TUI Engine]]
  * [[.:tui-controls|TUI Controls]]