warfactoryracine/docs/02-systems/SIZE_CONSTRAINTS_GUIDE.md

📏 Size Constraints Guide

Overview

Le système IUI supporte maintenant les contraintes de taille en pixels pour tous les types de fenêtres et docks.

⚙️ Types de contraintes

min_size - Taille minimum

{
  "min_size": {"width": 200, "height": 150}
}

• Empêche l'utilisateur de rendre la fenêtre trop petite
• Garantit que le contenu reste utilisable
• Obligatoire pour les fenêtres critiques (console, alerts)

max_size - Taille maximum

{
  "max_size": {"width": 800, "height": 600}
}

• Empêche les fenêtres de dominer l'écran
• Maintient la cohérence de l'interface
• Utile pour les popups et dialogs

size - Taille initiale

{
  "size": {"width": 400, "height": 300}
}

• Taille au moment de la création
• Sera clampée entre min_size et max_size
• Si hors limites, ajustée automatiquement

🏗️ Usage par type de fenêtre

Docks

ui->createDock("sidebar", DockType::TABBED, DockPosition::LEFT, {
    {"size", {{"width", 300}}},
    {"min_size", {{"width", 200}, {"height", 300}}},
    {"max_size", {{"width", 500}, {"height", 1000}}},
    {"resizable", true}
});

Splits

ui->createSplit("main_split", Orientation::HORIZONTAL, {
    {"min_panel_size", 80},                             // Chaque panel min 80px
    {"min_size", {{"width", 600}, {"height", 400}}},    // Split total min 600x400
    {"split_ratio", 0.6}                                // 60% / 40%
});

Content Windows

ui->showData(DataType::ECONOMY, {
    {"content", {...}},
    {"window", {
        {"id", "economy_dash"},
        {"size", {{"width", 350}, {"height", 250}}},
        {"min_size", {{"width", 300}, {"height", 200}}},    // Lisibilité
        {"max_size", {{"width", 600}, {"height", 400}}},    // Pas trop invasif
        {"resizable", true}
    }}
});

Floating Windows

ui->showData(DataType::ALERTS, {
    {"content", {...}},
    {"window", {
        {"floating", true},
        {"size", {{"width", 400}, {"height", 200}}},
        {"min_size", {{"width", 320}, {"height", 150}}},    // Alert lisible
        {"max_size", {{"width", 600}, {"height", 300}}},    // Pas trop grosse
        {"closeable", true}
    }}
});

📋 Recommandations par usage

Console/Log windows

• min_size: {"width": 400, "height": 100} (au moins 3-4 lignes)
• max_size: {"width": 2000, "height": 300} (pas trop haute)

Economy/Data tables

• min_size: {"width": 250, "height": 200} (colonnes lisibles)
• max_size: {"width": 500, "height": 600} (pas trop large)

Maps/Graphics

• min_size: {"width": 300, "height": 300} (détails visibles)
• max_size: {"width": 1200, "height": 1200} (performance)

Inventory grids

• min_size: {"width": 200, "height": 150} (grid 2x2 minimum)
• max_size: {"width": 400, "height": 500} (pas trop de scroll)

Settings/Dialogs

• min_size: {"width": 320, "height": 240} (tous contrôles visibles)
• max_size: {"width": 500, "height": 400} (taille raisonnable)

Alert popups

• min_size: {"width": 300, "height": 120} (texte lisible)
• max_size: {"width": 500, "height": 250} (pas invasif)

🔄 Comportement automatique

Clamping

Si size est hors des limites :

// Taille demandée : 100x50
// min_size : 200x150
// max_size : 800x600
// → Résultat : 200x150 (clampée au minimum)

Resize interactif

• L'utilisateur ne peut jamais redimensionner en dessous de min_size
• L'utilisateur ne peut jamais redimensionner au-dessus de max_size
• Les cursors de resize changent quand les limites sont atteintes

Split constraints

{
  "min_panel_size": 80,    // Chaque panel minimum 80px
  "split_ratio": 0.7       // Mais peut être ajusté si ça viole min_panel_size
}

⚡ Performance

• Enums pour types communs = comparaisons int rapides
• JSON pour config flexible = parse une fois à la création
• Pixel constraints appliquées côté implémentation (ImGui, HTML, etc.)
• Zero overhead si pas de contraintes spécifiées

🎯 Exemple complet

// Créer layout avec contraintes
ui->createDock("main_sidebar", DockType::TABBED, DockPosition::LEFT, {
    {"min_size", {{"width", 250}, {"height", 400}}},
    {"max_size", {{"width", 500}, {"height", 1000}}}
});

// Ajouter contenu avec contraintes
ui->showData(DataType::ECONOMY, {
    {"content", {{"prices", {...}}}},
    {"window", {
        {"parent", "main_sidebar"},
        {"dock", "tab"},
        {"min_size", {{"width", 240}, {"height", 200}}},
        {"max_size", {{"width", 450}, {"height", 600}}}
    }}
});

Résultat : Interface qui reste utilisable à toutes les tailles ! 🚀