thedmd / imgui-node-editor

Node Editor built using Dear ImGui
MIT License
3.73k stars 550 forks source link

Overlaying Button on Node Editor Results in Grayed Out Appearance #269

Closed Andthehand closed 11 months ago

Andthehand commented 11 months ago

I am currently working on overlaying a button on top of the node editor in my project. However, I am facing an issue where the button appears to be super grayed out, and I'm unsure how to resolve this problem.

My code looks like:

    static bool p_open = true;
    ImGui::Begin("Shader Creation Editor", &p_open, ImGuiWindowFlags_MenuBar);

    //Overlays
    {
        ImGui::SetCursorPosX(ImGui::GetStyle().WindowPadding.x + ImGui::GetCursorPosX());
        ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 12.0f);

        ImGui::Button("Test Button");

        ImGui::PopStyleVar();

        //Reset Cursor Position for overlay
        ImGui::SetCursorPosY(ImGui::GetStyle().WindowPadding.y);
        ImGui::SetCursorPosX(ImGui::GetStyle().WindowPadding.x);
    }

    ImNode::SetCurrentEditor(m_Context);
    ImNode::Begin("My Editor");

result1701747280

Andthehand commented 11 months ago

I was able to figure it out after wayyyy too long.

  1. You have to create the overlay button after the NodeEditor ends
  2. You have to surround the NodeEditor end statement with
    ImGui::PushItemFlag(ImGuiItemFlags_AllowOverlap, true);
    ax::NodeEditor::End();
    ImGui::PopItemFlag();

This is to make sure that the invisible button that is being created in ed::EditorContext::BuildControl can be overlapped. This is to make the Test button interactable.

This is how it looks like now:

image