Example of how to do editor style docking in ImGui for raylib

imgui_docking_exmaple.cpp

/*******************************************************************************************
*
*   raylib [core] example - Third Person Orbit Camera Example
*
*   Welcome to raylib!
*
*   To test examples, just press F6 and execute raylib_compile_execute script
*   Note that compiled executable is placed in the same folder as .c file
*
*   You can find all basic examples on C:\raylib\raylib\examples folder or
*   raylib official webpage: www.raylib.com
*
*   Enjoy using raylib. :)
*
*   This example has been created using raylib 1.0 (www.raylib.com)
*   raylib is licensed under an unmodified zlib/libpng license (View raylib.h for details)
*
*   Copyright (c) 2014 Ramon Santamaria (@raysan5)
*
********************************************************************************************/

#include "raylib.h"
#include "raymath.h"

#include "imgui.h"
#include "rlImGui.h"

int main(int argc, char* argv[])
{
    // Initialization
    //--------------------------------------------------------------------------------------
    int screenWidth = 1900;
    int screenHeight = 900;

    SetConfigFlags(FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE);
    InitWindow(screenWidth, screenHeight, "raylib [ImGui] example - ImGui Demo");
    SetTargetFPS(144);
    SetupRLImGui(true);

    // setup a background texture
    Image img = GenImageChecked(64, 64, 16, 16, DARKGRAY, GRAY);
    Texture bg = LoadTextureFromImage(img);
    UnloadImage(img);

    // flag so we can quit the game from the file menu
    bool quit = false;
    // Main game loop
    while (!WindowShouldClose() && !quit)    // Detect window close button or ESC key
    {
        BeginDrawing();
        ClearBackground(DARKGRAY);

        // fill the background with something interesting
        DrawTextureRec(bg, Rectangle{ 0, 0, float(GetScreenWidth()), float(GetScreenHeight()) }, Vector2Zero(), WHITE);
        DrawRectanglePro(Rectangle{ GetScreenWidth() * 0.5f, GetScreenHeight() * 0.5f,200,200 }, Vector2{ 100,100 }, float(GetTime()) * 45, ColorAlpha(RED,0.75f));

        // start the GUI
        BeginRLImGui();

        // create an ImGui window that covers the entire viewport, so that we can have a menu bar at the top of the applications
        ImGui::SetNextWindowPos(ImVec2(0, 0));                                                  // always at the window origin
        ImGui::SetNextWindowSize(ImVec2(float(GetScreenWidth()), float(GetScreenHeight())));    // always at the window size

        ImGuiWindowFlags windowFlags = ImGuiWindowFlags_NoBringToFrontOnFocus |                 // we just want to use this window as a host for the menubar and docking
            ImGuiWindowFlags_NoNavFocus |                                                      // so turn off everything that would make it act like a window
            ImGuiWindowFlags_NoDocking |
            ImGuiWindowFlags_NoTitleBar |
            ImGuiWindowFlags_NoResize |
            ImGuiWindowFlags_NoMove |
            ImGuiWindowFlags_NoCollapse |
            ImGuiWindowFlags_MenuBar |
            ImGuiWindowFlags_NoBackground;                                                      // we want our game content to show through this window, so turn off the background.

        ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0, 0));                          // we don't want any padding for windows docked to this window frame

        bool show = (ImGui::Begin("Main", NULL, windowFlags));                                   // show the "window"
        ImGui::PopStyleVar();                                                                    // restore the style so inner windows have fames

        // create a docking space inside our inner window that lets prevents anything from docking in the central node (so we can see our game content)
        ImGui::DockSpace(ImGui::GetID("Dockspace"), ImVec2(0.0f, 0.0f),  ImGuiDockNodeFlags_PassthruCentralNode);
        if (show)
        {
            // Do a menu bar with an exit menu
            if (ImGui::BeginMenuBar())
            {
                if (ImGui::BeginMenu("File"))
                {
                    if (ImGui::MenuItem("Exit"))
                        quit = true;

                    ImGui::EndMenu();
                }
                ImGui::EndMenuBar();
            }
        }
        ImGui::End();

        // show any other windows that we want to be dockable
        ImGui::ShowDemoWindow(NULL);

        // end ImGui
        EndRLImGui();

        // Finish drawing
        DrawFPS(0, GetScreenHeight() - 20);
        EndDrawing();
        //----------------------------------------------------------------------------------
    }
    ShutdownRLImGui();
    UnloadTexture(bg);
    CloseWindow(); 

    return 0;
}

I have added a docking example to the proper rlImGui. It's much simpler than this old example. You just need to do two things, enable docking and set docking on the viewport.

https://github.com/raylib-extras/rlImGui/blob/main/examples/docking_example.cpp

Thank you for your response, @JeffM2501. I managed to get it working here. Thanks.

@JeffM2501 sorry to bother you again, but I was trying to make this simple example of a circle and a dockable ImGui window work together.

#include "raymath.h"

#include "imgui.h"
#include "rlImGui.h"

Color green = {173, 204, 96, 255};

int main(int argc, char* argv[])
{
	// Initialization
	//--------------------------------------------------------------------------------------
	int screenWidth = 1280;
	int screenHeight = 800;

	SetConfigFlags(FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE);
	InitWindow(screenWidth, screenHeight, "teste");
	SetTargetFPS(60);
	rlImGuiSetup(false);

	bool run = true;


	ImGui::GetIO().ConfigFlags |= ImGuiConfigFlags_DockingEnable;

	while (!WindowShouldClose() && run)    // Detect window close button or ESC key, or a quit from the menu
	{
		BeginDrawing();
		ClearBackground(DARKGRAY);

		DrawCircle(screenWidth/2, screenHeight/2, 100, green);


		rlImGuiBegin();
		ImGui::DockSpaceOverViewport();

		// show some windows
		if (ImGui::Begin("Test Window"))
		{
			ImGui::TextUnformatted("Another window");
		}
		ImGui::End();

		// end ImGui Content
		rlImGuiEnd();



		EndDrawing();

	}
	rlImGuiShutdown();

	CloseWindow();


	return 0;
}

Depending on where I place the rlImGuiBegin(); ... rlImGuiEnd();, either the circle doesn't appear, or the ImGui doesn't appear. The only way I managed to get both to work together with the windows on top of the circle was by removing the ImGui::DockSpaceOverViewport(); and losing the docking capability. What am I doing wrong? Can you lend a hand?

I also tried to take that example of yours from the editor and make it dockable by adding ImGui::GetIO().ConfigFlags |= ImGuiConfigFlags_DockingEnable; after rlImGuiSetup(true); and ImGui::DockSpaceOverViewport(); after rlImGuiBegin(); and it doesn't compile. Could you post a version of this dockable example as well?
Thank you very much.

Any update on this? I am having the same problem with the docking + drawing stuff with Raylib.

Any update on this? I am having the same problem with the docking + drawing stuff with Raylib.

No, I just abandoned docking.

Sorry, just saw this.
Your stuff is being drawn it's just drawn behind the dockspace central node that is created for the viewport.
You use specific flags to control that.
Set

ImGui::DockSpaceOverViewport(0,  NULL, ImGuiDockNodeFlags_PassthruCentralNode);

And that will remove the gray tint applied to the central node of the dockspace.
It works just fine.

Alternatively you can create an undecorated window with no background and attach a dockspace to it.

These are not issues with rlImGui, simply how docking branch works in ImGui.

Thanks for the answer @JeffM2501, I'll go back to using the docking branch now