Unreal Engine-like "browser tabs" with ImGui docking: How?

[UnidayStudio]

Version/Branch of Dear ImGui:

Version: v1.80
Branch: docking

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_opengl3.cpp + imgui_impl_sdl.cpp
Compiler: MSVC
Operating System: Windows 10

My Issue/Question:
Hi, y'all! I'm using the docking branch and I need some ideas for a thing: I'd like to do create "nested windows", just like unreal engine does. Being a bit more descriptive, I want to have "google chrome/browser-like tabs" on top of the main window and, for every tab, a different dockspace on it. Those "chrome tabs" can be moved around and maybe even undocked from the main OS window (just like the docking does).

Here is an example:

In the image, you can see that the top part is the "browser-like tabs" and below (I've highlighted in blue), sort of dockspace for regular docking tabs. I was thinking about doing the browser-like one with a regular ImGui::BeginTabBar with a dockspace for each tab, but I'm not sure if it's versatile enough and/or the best idea. For example: the ImGui::BeginTabItem don't behave exactly as I want to (I can't drag it around or undock it).

So what is the best approach for this?

Thank you!

(Sorry for opening an issue for that, without the discord server it's really hard to figure out some simple/dumb stuff, I miss it a lot)

[ocornut]

I am not exactly sure what problem you are facing?

• You submit a viewport covering dockspace where top levels tabs/documents can be docked.
• Top level tabs/documents can submit their own dockspace.
• Tools/views can be docked there.

So you two levels of docking. You don't need to create any tab bar manually.
The only tricks here is that you don't want top-level documents to dock into the second layer, and vice-versa. For this you can use ImGuiWindowClass + SetNextWindowClass().

// Submit top-level dockspace
ImGuiWindowClass top_level_class;
top_level_class.ClassId = ImHashStr("MyTopLevelClass");
top_level_class.DockingAllowUnclassed = false;
ImGui::DockSpaceOverViewport(NULL, ImGuiDockNodeFlags_None, &top_level_class);

// Submit top-level documents
ImGui::SetNextWindowClass(&top_level_class);
ImGui::Begin("ThirdPersonExampleMap", ....);

ImGuiWindowClass inside_document_class;
// Choice 1: shared class for all documents (all tools can be docked into all documents)
inside_document_class.ClassId = ImHashStr("InsideDocumentClass");
// Choice 2: each document has its class
inside_document_class.ClassId = my_document->ID; or ImHashStr(my_document->Name);
ImGui::Dockspace(...., ..., ...., &inside_document_class);

ImGui::End();

// Submit tools
ImGui::SetNextWindowClass(&inside_document_class);
ImGui::Begin("Components"); 
...
ImGui::End();

(Sorry for opening an issue for that, without the discord server it's really hard to figure out some simple/dumb stuff, I miss it a lot

Can you clarify why are you thinking this is NOT the right place to post here?
It is perfectly adequate and preferable to post this sort of question here. This is exactly what this place is for.
Discord was a mixture of incomplete answers and no search-ability, was a great waste of energy.

[ocornut]

@UnidayStudio closing as answered.