TUI Layout

Anchoring-First Responsive Layout za TUI-aplikacije.

Anchoring-First znači:
- Terminal Resize ne smije pokvariti Layout, Focus i Rendering
- Controls zadržavaju stabilne prostorne odnose
- Predvidljiva pravila Expansion/Shrinking

Default: Left + Top
→ Pozicija ostaje stabilna, veličina konstantna

Left + Right:
→ Širina se rasteže/skuplja sa širinom Parenta

Top + Bottom:
→ Visina se rasteže/skuplja s visinom Parenta

Sva četiri (Left + Top + Right + Bottom):
→ Rect se rasteže u oba smjera

Bez Anchora:
→ Tretirati kao Left + Top (bez "floating" nejasnoće)

<!-- Fiksna pozicija gore lijevo -->
<Button Anchors="Left,Top" Text="OK" />
 
<!-- Puna širina, fiksna visina -->
<TextEdit Anchors="Left,Top,Right" Height="3" />
 
<!-- Ispunjava cijelo dostupno područje -->
<ListView Anchors="Left,Top,Right,Bottom" />
 
<!-- Statusna traka dolje -->
<StatusBar Anchors="Left,Right,Bottom" Height="1" />

1. Primiti Resize Event
   └─ Ažurirati Root Available Rect

2. Invalidirati Layout
   └─ Izvršiti Measure/Arrange Pass

3. Zadržati Focus
   └─ Isti logički Control zadržava Focus

4. Ponovno renderirati
   └─ Paint → DiffFlush

OBAVEZNO:
- Isti Input → Isti Layout
- Nema flickera kod brzog Resizea
- Nema Cursor-Corruptiona
- Focus ostaje na logičkom Controlu

Opcionalni ali preporučeni Resize-pragovi:

<Panel ResponsiveMode="Auto" Breakpoints="80,120">
  <!-- Automatski Reflow pri prijelazu Breakpointa -->
</Panel>

OBAVEZNO:
- Breakpoints NISU "magic" - definirati u PXAML ili Theme Config
- Breakpoints dokumentirati
- Ponašanje za svaki Breakpoint jasno definirati

Orijentacija: Vertikalno ili Horizontalno
Djeca se aranžiraju jedno za drugim

<Stack Orientation="Vertical">
  <Label Text="Ime:" />
  <TextEdit />
  <Label Text="Email:" />
  <TextEdit />
</Stack>

Pozicije: Left, Top, Right, Bottom, Fill
Djeca se pričvršćuju na strane, ostatak ispunjava sredinu

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

Za Popupe, Modale, Tooltipe
Prekriva druge Controls
Mora ostati unutar Screen Boundsa (clamped)

<Overlay>
  <Dialog X="10" Y="5" Width="40" Height="10">
    <!-- Modal Content -->
  </Dialog>
</Overlay>

Definiranje Redaka i Stupaca
Postavljanje Controls u ćelije

Redoslijed izračuna Layouta:

1. Container Layout (ako eksplicitno)
   └─ Stack/Grid/Dock/Overlay izračunava Child-Rectove

2. Primjena Anchora
   └─ Unutar Container-Recta rafinirati
   └─ Poštivati Min/Max
   └─ Zadržati Margins/Padding

3. Clipping na kraju
   └─ Rezanje finalnih Boundsa

PREFERIRANO:
- Koristiti ScrollViewer Container
- Content učiniti scrollabilnim

NIJE Default:
- Text "shrink to fit"

OBAVEZNO:
- Controls mogu renderirati u manjem Rectu (Clip + Ellipsis)
- State se ne smije izgubiti

<ScrollViewer Anchors="Left,Top,Right,Bottom">
  <Stack Orientation="Vertical">
    <!-- Dugačka lista Controls -->
  </Stack>
</ScrollViewer>

OBAVEZNO:
- Focus se prati preko Control-Identiteta (ne Screen-pozicije)
- Nakon Reflowa:
  - Ako fokusirani Control još može imati fokus i vidljiv je → zadržati
  - Inače: Fallback na sljedeći fokusirajući Sibling u Focus-Orderu

procedure TLayoutEngine.ApplyReflow;
var
  PreviousFocus: TWvdSControl;
begin
  (* Zapamtiti Focus *)
  PreviousFocus := FocusManager.FocusedControl;
 
  (* Ponovno izračunati Layout *)
  MeasureAndArrange(RootControl);
 
  (* Vratiti Focus *)
  if (PreviousFocus <> nil) and
     PreviousFocus.CanFocus and
     PreviousFocus.IsVisible then
    FocusManager.SetFocus(PreviousFocus)
  else
    FocusManager.FocusNextAvailable;
end;

[ ] Narrow ↔ Wide ponovljeno: nema flickera
[ ] Cursor nije korumpiran nakon Resizea
[ ] Focus ostaje na istom Controlu
[ ] Anchored Stretch Controls se ne preklapaju
[ ] Popupi/Overlayi ostaju u Screen Boundsima

[ ] Layout se ispravno mijenja pri prijelazu Breakpointa
[ ] Nema flickera pri promjeni Breakpointa
[ ] Svi Breakpointi dokumentirani

[ ] Stack ispravno aranžira djecu
[ ] Dock ispravno ispunjava (Left, Top, Right, Bottom, Fill)
[ ] Overlay ostaje u Boundsima
[ ] Ugniježdeni Containeri funkcioniraju

• TUI-Razvoj Pregled
• TUI Engine
• TUI Controls