search

ocornut / imgui

Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies
MIT License
60.95k stars 10.29k forks source link

Dividing a window into child windows #3228

Open dgregorius opened 4 years ago

dgregorius commented 4 years ago

Version: Latest Branch: docking

Back-ends: imgui_impl_opengl3.cpp + imgui_impl_glfw.cpp Compiler: VS 2019 Operating System: Windows 10

I just ran an experiment and tried to divide a parent window equally into two child windows. Here is a screenshot:

Capture

And the code for this test:

ImGuiViewport* Viewport = ImGui::GetMainViewport(); ImGui::SetNextWindowPos( Viewport->Pos, ImGuiCond_Once ); ImGui::SetNextWindowSize( Viewport->Size, ImGuiCond_Once );

ImGuiWindowClass WindowClass; WindowClass.ViewportFlagsOverrideClear = ImGuiViewportFlags_NoDecoration | ImGuiViewportFlags_NoTaskBarIcon; ImGui::SetNextWindowClass( &WindowClass );

ImGui::PushStyleColor( ImGuiCol_WindowBg, TITLE_COLOR ); ImGui::PushStyleColor( ImGuiCol_ChildBg, ImVec4( 0.4f, 0.2f, 0.2f, 1.0f ) ); ImGui::PushStyleVar( ImGuiStyleVar_WindowPadding, ImVec2( 0, 0 ) ); if ( ImGui::Begin( "Animation", &mActive, ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoCollapse | ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_NoDocking ) ) { ImVec2 WindowPos = ImGui::GetWindowPos(); ImVec2 WindowSize = ImGui::GetWindowSize(); ImVec2 WindowMin = WindowPos + ImGui::GetCursorPos(); ImVec2 WindowMax = WindowPos + WindowSize; ImVec2 WindowSpace = WindowMax - WindowMin;

ImGui::BeginChild( "##Child1", ImVec2( 0, 0.5f * WindowSpace.y ) );
ImGui::TextUnformatted( "Child1" );
ImGui::EndChild();

ImGui::BeginChild( "##Child2", ImVec2( 0, 0.5f * WindowSpace.y ) );
ImGui::TextUnformatted( "Child2" );
ImGui::EndChild();

} ImGui::End(); ImGui::PopStyleColor( 2 ); ImGui::PopStyleVar();

Basically I am getting the window size and subtract the cursor position to account for the menu. Then I create the two child windows. The sizes add up, but I still end up with a scrollbar which means I am overshooting. What is the proper way to subdivide a parent window into equally sized child windows?

In the same context I would also like to have a clear border line only at the top of each child window. Of course you can easily achieve this by adding a line to the child windows draw list, but I am wondering if there is a better way to do this?

Thanks, -Dirk

ocornut commented 4 years ago

Items are vertically spaced with style.ItemSpacing.y So you can set that value to zero or calculate your sizes based on it.

You can use Separator() between windows. Currently Separator() doesn't advance the cursor vertically (apart from adding ItemSpacing.y) so you don't need to take account for it.

(about Separator not adding extra height: notice c5d83d8af205618d950527625838377a9853b3b8 and revert 9534ef9b26b1a3240c31f7bd643d8ebfdef01484 First commit is correct but broke some existing calculation code, we will fix later with flags and new settings.)