aissia/docs/02-systems/SIZE_CONSTRAINTS_GUIDE.md
StillHammer ba42b6d9c7 Update CDC with hybrid architecture (WarFactory + multi-target)
- Add hybrid deployment modes: local_dev (MVP) and production_pwa (optional)
- Integrate WarFactory engine reuse with hot-reload 0.4ms
- Define multi-target compilation strategy (DLL/SO/WASM)
- Detail both deployment modes with cost analysis
- Add progressive roadmap: Phase 1 (local), Phase 2 (POC WASM), Phase 3 (cloud)
- Budget clarified: $10-20/mois (local) vs $13-25/mois (cloud)
- Document open questions for technical validation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-27 11:49:09 +08:00

4.9 KiB

📏 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 ! 🚀