LayoutManager for ImGui

Conjure grids that map named slots to resizable views using declarative shapes.

Features

• Fixed and auto dimensions per region
• Fill mode to distribute leftover space
• Centralized padding & spacing (todo further implementation) style
• API with RegionProxy for easy chaining

Installation

1. Copy LayoutManager.hpp into your project.

2. Include it where you need layout control:

   #include "LayoutManager.hpp"

3. Ensure ImGui is initialized before using.

Example: Gui Window

Below is a simplified example based on an application window. Regions are defined once in the constructor, then laid out each frame.

// 0) Your ImGui Context Setup
ImGui::CreateContext();
ImGui_ImplBackend_Init(window, device);   // pseudo: could be Win32+D3D11, GLFW+OpenGL, etc.

// 1) Define layout regions ( before imgui::newframe )
auto& lm = LayoutManager::get();

lm.define("Header").autoHeight().setContent([]() {
    ImGui::Text("Application Title");
});

lm.define("LeftPane").fixedWidth(200).fillHeight().setContent([]() {
    if (ImGui::Button("Button A")) { /* action */ }
    ImGui::Checkbox("Option X", &optX);
});

lm.define("MainView").fillHeight().setContent([]() {
    ImGui::TextWrapped("Main area: rendering or data display here.");
    ImGui::PlotLines("Data Plot", dataBuffer, dataCount);
});

lm.define("Footer").autoHeight().setContent([]() {
    ImGui::Text("FPS: %.1f", ImGui::GetIO().Framerate);
});

// 4) Main loop
while (appIsRunning()) {
   
    ImGui::NewFrame();              // ImGui frame start

    // Build your GUI
    ImGui::Begin("Main Window");

    // Render layout in this left->right top->bottom layout
    lm.renderGrid({
        { "Header" },
        { "LeftPane", "MainView" },
        { "Footer" }
    });

    ImGui::End();

    // Finish your rendering
}

+-------------------------------------------+
|                 Header                    |
+----------------+--------------------------+
| LeftPane        |        MainView         |
|          (200px)|                         |
|                 |                         |
|                 |                         |
+----------------+--------------------------+
|                 Footer                    |
+-------------------------------------------+

Explanation

1. Define regions using lm.define(name, flags) and configure each with chain API:

   • .autoHeight(), .fixedWidth(x), .fillHeight(), etc.
   • .setContent(lambda) supplies the ImGui calls to render.

2. Render layout in renderContent() by passing a 2D vector of region names. Each inner vector is a row; elements flow left-to-right.

3. Customization: override LayoutStyle (padding/spacing) in renderGrid(rows, style) to tweak padding.

Customizing Style

LayoutStyle style;
style.padding = ImVec2(10, 10);
style.spacing = ImVec2(5, 8);

LayoutManager::get().renderGrid(rows, style);