Layout TUI

Layout responsive anchoring-first per applicazioni TUI.

Anchoring-First significa:
- Il resize del terminale non deve rompere layout, focus e rendering
- I controlli mantengono relazioni spaziali stabili
- Regole prevedibili di espansione/contrazione

Default: Left + Top
→ Posizione rimane stabile, dimensione costante

Left + Right:
→ Larghezza si espande/contrae con larghezza parent

Top + Bottom:
→ Altezza si espande/contrae con altezza parent

Tutti e quattro (Left + Top + Right + Bottom):
→ Rect si espande in entrambe le direzioni

Nessun anchor:
→ Trattare come Left + Top (nessuna ambiguita "floating")

<!-- Posizione fissa in alto a sinistra -->
<Button Anchors="Left,Top" Text="OK" />
 
<!-- Larghezza piena, altezza fissa -->
<TextEdit Anchors="Left,Top,Right" Height="3" />
 
<!-- Riempie l'intera area disponibile -->
<ListView Anchors="Left,Top,Right,Bottom" />
 
<!-- Barra di stato in basso -->
<StatusBar Anchors="Left,Right,Bottom" Height="1" />

1. Evento resize ricevuto
   └─ Aggiornare rect disponibile root

2. Invalidare layout
   └─ Eseguire passaggio Measure/Arrange

3. Mantenere focus
   └─ Stesso controllo logico mantiene il focus

4. Re-renderizzare
   └─ Paint → DiffFlush

OBBLIGATORIO:
- Stesso input → stesso layout
- Nessun flicker con resize veloce
- Nessuna corruzione cursore
- Focus rimane sul controllo logico

Soglie di resize opzionali ma raccomandate:

<Panel ResponsiveMode="Auto" Breakpoints="80,120">
  <!-- Reflow automatico al superamento breakpoint -->
</Panel>

OBBLIGATORIO:
- I breakpoint NON sono "magici" - definire in PXAML o config tema
- Documentare i breakpoint
- Definire chiaramente il comportamento per ogni breakpoint

Orientamento: Verticale o orizzontale
I figli vengono disposti in sequenza

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

Posizioni: Left, Top, Right, Bottom, Fill
I figli si agganciano ai lati, il resto riempie il centro

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

Per popup, modali, tooltip
Si sovrappone ad altri controlli
Deve rimanere entro i bounds dello schermo (clamped)

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

Definire righe e colonne
Posizionare controlli nelle celle

Ordine di calcolo del layout:

1. Layout container (se esplicito)
   └─ Stack/Grid/Dock/Overlay calcola rect figli

2. Applicare anchor
   └─ Raffinare all'interno del rect container
   └─ Rispettare Min/Max
   └─ Preservare margin/padding

3. Clipping per ultimo
   └─ Ritagliare bounds finali

PREFERITO:
- Usare container ScrollViewer
- Rendere il contenuto scrollabile

NON come default:
- Testo "shrink to fit"

OBBLIGATORIO:
- I controlli possono renderizzare in rect piu piccolo (clip + ellipsis)
- Lo stato non deve andare perso

<ScrollViewer Anchors="Left,Top,Right,Bottom">
  <Stack Orientation="Vertical">
    <!-- Lista lunga di controlli -->
  </Stack>
</ScrollViewer>

OBBLIGATORIO:
- Il focus viene tracciato tramite identita del controllo (non posizione schermo)
- Dopo il reflow:
  - Se il controllo focalizzato e ancora focalizzabile e visibile → mantenere
  - Altrimenti: fallback al prossimo sibling focalizzabile nell'ordine focus

procedure TLayoutEngine.ApplyReflow;
var
  PreviousFocus: TWvdSControl;
begin
  (* Memorizzare focus *)
  PreviousFocus := FocusManager.FocusedControl;
 
  (* Ricalcolare layout *)
  MeasureAndArrange(RootControl);
 
  (* Ripristinare focus *)
  if (PreviousFocus <> nil) and
     PreviousFocus.CanFocus and
     PreviousFocus.IsVisible then
    FocusManager.SetFocus(PreviousFocus)
  else
    FocusManager.FocusNextAvailable;
end;

[ ] Narrow ↔ Wide ripetuto: nessun flicker
[ ] Cursore non corrotto dopo resize
[ ] Focus rimane sullo stesso controllo
[ ] Controlli anchored stretch non si sovrappongono
[ ] Popup/overlay rimangono nei bounds schermo

[ ] Layout cambia correttamente al superamento breakpoint
[ ] Nessun flicker al cambio breakpoint
[ ] Tutti i breakpoint documentati

[ ] Stack dispone i figli correttamente
[ ] Dock riempie correttamente (Left, Top, Right, Bottom, Fill)
[ ] Overlay rimane nei bounds
[ ] Container annidati funzionano

• Panoramica sviluppo TUI
• TUI Engine
• Controlli TUI