ocornut / imgui

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

Tabbar containing dockspace #7610

Closed xahon closed 6 months ago

xahon commented 6 months ago

Version/Branch of Dear ImGui:

Version b39fc84f, Branch: docking

Back-ends:

imgui_impl_opengl3.cpp + imgui_impl_glfw.cpp

Compiler, OS:

msvc 2022

Full config/build information:

Dear ImGui 1.90.7 WIP (19063)
--------------------------------
sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=199711
define: _WIN32
define: _WIN64
define: _MSC_VER=1939
define: _MSVC_LANG=201703
define: IMGUI_HAS_VIEWPORT
define: IMGUI_HAS_DOCK
--------------------------------
io.BackendPlatformName: imgui_impl_glfw
io.BackendRendererName: imgui_impl_opengl3
io.ConfigFlags: 0x00000043
 NavEnableKeyboard
 NavEnableGamepad
 DockingEnable
io.ConfigViewportsNoDecoration
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x00001C0E
 HasMouseCursors
 HasSetMousePos
 PlatformHasViewports
 HasMouseHoveredViewport
 RendererHasVtxOffset
 RendererHasViewports
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64
io.DisplaySize: 2560.00,1377.00
io.DisplayFramebufferScale: 1.00,1.00
--------------------------------
style.WindowPadding: 8.00,8.00
style.WindowBorderSize: 1.00
style.FramePadding: 4.00,3.00
style.FrameRounding: 0.00
style.FrameBorderSize: 0.00
style.ItemSpacing: 8.00,4.00
style.ItemInnerSpacing: 4.00,4.00

Details:

My Issue/Question:

I'm trying to make a log viewer which contains menu bar, multiple tabs with views that utilize docking feature. Code boils down to this

// Create docking window with flags from demo code
// Create menu bar
// Create dockspace with id MyDockspace and do once initialization (ImGui::DockBuilder* calls)
// BeginTabBar
//     Create subviews with ids defined in DockBuilder
// EndTabBar

This code breaks, tabs are shown below the subviews creating an unwanted scrollbar on the edge of subviews rect. Tabs are functional, docking layout is preserved between tabs (as I want to be) but the placement of the tabs is not applicable for me.

image image

Screenshots/Video:

No response

Minimal, Complete and Verifiable Example code:

No response

ocornut commented 6 months ago

You should pass a size to DockSpace() to correctly leave room for a tab bar, otherwise by default DockSpace() will use all remaining space. Probably the right size to use is ImVec2(0.0f, -ImGui::GetFrameHeightWithSpacing())`.

xahon commented 6 months ago

You should pass a size to DockSpace() to correctly leave room for a tab bar, otherwise by default DockSpace() will use all remaining space. Probably the right size to use is ImVec2(0.0f, -ImGui::GetFrameHeightWithSpacing())`.

It fixes the problem with unwanted scrollbars. Now I can see tabs at the bottom of the screen without scrolling

ocornut commented 6 months ago

If you want the tab bar to be above the DockSpace() then submit the tab-bar before the DockSpace().

xahon commented 6 months ago

When I submit tabbar along with all sub windows before I define dockspace and its settings, it breaks. Tabs are shown in expected position but windows are floating and not docked to anything

xahon commented 6 months ago

Oh, I got your point. I can read BeginTabBar into a bool variable, then define dockspace and only then define actual windows

ocornut commented 6 months ago

I cannot understand your question without actual code. Dockspace needs to be submitted before any window that may be docked into it. see Examples->Documents for an example.

xahon commented 6 months ago

Yeah, thanks, I've figured out how to make tab bar right way

I used this approach in Imgui

// MenuBar
// Dockspace
if (BeginTabBar()) {
   // Draw windows
}

But instead I needed to use this one

// MenuBar
bool tabBarStarted = BeginTabBar();
// Dockspace
if (tabBarStarted) {
   // Draw windows
}
ocornut commented 6 months ago

I think the right pattern you may be looking for is:

if (BeginTabBar(....)
{
    DockSpace(...);
    DrawWindows();
    EndTabBar();
}
else
{
   DockSpace(..., ImGuiDockNodeFlags_KeepAliveOnly);
}

Keeping the dockspace alive ensure windows don't get undocked if other windows than DrawWindows() are docked into this DockSpace(). Otherwise if a DockSpace() stops being alive, all its windows will get undocked.