TUI Layout

Anchoring-First Responsive Layout für TUI-Anwendungen.

Anchoring-First bedeutet:
- Terminal Resize darf Layout, Focus und Rendering nicht brechen
- Controls behalten stabile räumliche Beziehungen
- Vorhersagbare Expansion/Shrinking-Regeln

Default: Left + Top
→ Position bleibt stabil, Größe konstant

Left + Right:
→ Breite dehnt/schrumpft mit Parent-Breite

Top + Bottom:
→ Höhe dehnt/schrumpft mit Parent-Höhe

Alle vier (Left + Top + Right + Bottom):
→ Rect dehnt sich in beide Richtungen

Keine Anchors:
→ Behandeln wie Left + Top (keine "floating" Ambiguität)

<!-- Feste Position oben links -->
<Button Anchors="Left,Top" Text="OK" />
 
<!-- Volle Breite, feste Höhe -->
<TextEdit Anchors="Left,Top,Right" Height="3" />
 
<!-- Füllt gesamten verfügbaren Bereich -->
<ListView Anchors="Left,Top,Right,Bottom" />
 
<!-- Statusleiste unten -->
<StatusBar Anchors="Left,Right,Bottom" Height="1" />

1. Resize Event empfangen
   └─ Root Available Rect aktualisieren

2. Layout invalidieren
   └─ Measure/Arrange Pass durchführen

3. Focus erhalten
   └─ Gleicher logischer Control behält Focus

4. Neu rendern
   └─ Paint → DiffFlush

PFLICHT:
- Gleicher Input → Gleiches Layout
- Kein Flicker bei schnellem Resize
- Kein Cursor-Corruption
- Focus bleibt auf logischem Control

Optionale aber empfohlene Resize-Schwellwerte:

<Panel ResponsiveMode="Auto" Breakpoints="80,120">
  <!-- Automatisches Reflow bei Breakpoint-Überschreitung -->
</Panel>

PFLICHT:
- Breakpoints NICHT "magic" - in PXAML oder Theme Config definieren
- Breakpoints dokumentieren
- Verhalten bei jedem Breakpoint klar definieren

Orientierung: Vertikal oder Horizontal
Kinder werden nacheinander angeordnet

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

Positionen: Left, Top, Right, Bottom, Fill
Kinder docken an Seiten, Rest füllt Mitte

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

Für Popups, Modals, Tooltips
Überlagert andere Controls
Muss innerhalb Screen Bounds bleiben (clamped)

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

Zeilen und Spalten definieren
Controls in Zellen platzieren

Reihenfolge der Layout-Berechnung:

1. Container Layout (wenn explizit)
   └─ Stack/Grid/Dock/Overlay berechnet Child-Rects

2. Anchors anwenden
   └─ Innerhalb des Container-Rects verfeinern
   └─ Min/Max beachten
   └─ Margins/Padding erhalten

3. Clipping zuletzt
   └─ Finale Bounds beschneiden

BEVORZUGT:
- ScrollViewer Container verwenden
- Content scrollbar machen

NICHT als Default:
- Text "shrink to fit"

PFLICHT:
- Controls können in kleinerem Rect rendern (Clip + Ellipsis)
- State darf nicht verloren gehen

<ScrollViewer Anchors="Left,Top,Right,Bottom">
  <Stack Orientation="Vertical">
    <!-- Lange Liste von Controls -->
  </Stack>
</ScrollViewer>

PFLICHT:
- Focus wird über Control-Identität getrackt (nicht Screen-Position)
- Nach Reflow:
  - Wenn fokussiertes Control noch fokussierbar und sichtbar → behalten
  - Sonst: Fallback auf nächstes fokussierbares Sibling in Focus-Order

procedure TLayoutEngine.ApplyReflow;
var
  PreviousFocus: TWvdSControl;
begin
  (* Focus merken *)
  PreviousFocus := FocusManager.FocusedControl;
 
  (* Layout neu berechnen *)
  MeasureAndArrange(RootControl);
 
  (* Focus wiederherstellen *)
  if (PreviousFocus <> nil) and
     PreviousFocus.CanFocus and
     PreviousFocus.IsVisible then
    FocusManager.SetFocus(PreviousFocus)
  else
    FocusManager.FocusNextAvailable;
end;

[ ] Narrow ↔ Wide wiederholt: kein Flicker
[ ] Cursor nicht korrupt nach Resize
[ ] Focus bleibt auf gleichem Control
[ ] Anchored Stretch Controls überlappen nicht
[ ] Popups/Overlays bleiben in Screen Bounds

[ ] Layout wechselt korrekt bei Breakpoint-Überschreitung
[ ] Kein Flicker beim Breakpoint-Wechsel
[ ] Alle Breakpoints dokumentiert

[ ] Stack ordnet Kinder korrekt an
[ ] Dock füllt korrekt (Left, Top, Right, Bottom, Fill)
[ ] Overlay bleibt in Bounds
[ ] Nested Containers funktionieren

• TUI-Entwicklung Übersicht
• TUI Engine
• TUI Controls