ocornut / imgui

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

Click through ImGui Window (DX11) #6147

Open Vucee opened 1 year ago

Vucee commented 1 year ago

Version/Branch of Dear ImGui: v1.89.3 docking

Back-end/Renderer/Compiler/OS Back-ends: imgui_impl_dx11.cpp + imgui_impl_win32.cpp Operating System: Windows 10

My Issue/Question: What I'm trying to do is making a transparent imgui window which is click through. I'm using Begin() for the transparent window. It's used do draw a rounded window shadow on it. Making it transparent works, but I'm not sure how to make it click through.

I tried using the different "ImGuiWindowFlags", but nothing is working. With "ImGuiWindowFlags_NoMouseInputs" it ignores the mouse inputs, but still catches the clicks. Can I somehow make it ignore the mouse clicks completely?

I couldn't really find a solution for it in the listed Issues. Is it even supported atm?

Transparent window with shadow applied: image

The red part which should be clickthrough: image

ocornut commented 1 year ago

The main _NoInputs flag should make windows 100% clickthrough, but I don’t understand the images you posted and how they relate to your request. Are you expecting clickthroughness to be based in per pixel opacity ?

are you 100% talking about imgui windows, not related to multi-viewports? Check Glossary to make sure you are using the right terms.

Vucee commented 1 year ago

I checked the Glossary and if I understand it correctly its a ImGui Window yes. But I'm using multi-viewports. I'm not using the win32 window tho, its hidden and set to size 0 0. So the windows I created are outside the win32 window.

Here a short video so it's easier to understand what I mean: https://streamable.com/hu9uxp

As u can see in the beginning, I click and drag the blue window, while my mouse is on the invisible window, where I draw my shadow. After I set alpha to 0.3 u can see the window which I want to be click through. However if I set "ImGuiWindowFlags_NoInputs" on "Begin()" I can't interact with the full ui at all anymore and I'm still not able to click thorugh it.

My code:

ImGui::SetNextWindowBgAlpha(0.3f);
ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, { 0.0f });
ImGui::PushStyleColor(ImGuiCol_Border, ImVec4{ 0, 0, 0, 0.0f });
ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4{ 0,0,0, 0.0f });
//ImGui::GetStyle().Alpha = 1.0f;       
ImGui::SetNextWindowSize({ 1000,750 });
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(0, 0));

//invisible window to draw the shadow ontop
ImGui::Begin(lpWindowName, &bDraw, WindowFlags);
{
    ImVec2 pos = ImGui::GetWindowPos();
    ImDrawList* draw = ImGui::GetWindowDrawList();

    draw->AddRect(pos + ImVec2(99, 99), pos + ImVec2(901, 651), ImColor(0, 0, 0, 60), 25.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(98, 98), pos + ImVec2(902, 652), ImColor(0, 0, 0, 52), 26.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(97, 97), pos + ImVec2(903, 653), ImColor(0, 0, 0, 46), 27.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(96, 96), pos + ImVec2(904, 654), ImColor(0, 0, 0, 40), 28.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(95, 95), pos + ImVec2(905, 655), ImColor(0, 0, 0, 36), 29.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(94, 94), pos + ImVec2(906, 656), ImColor(0, 0, 0, 32), 30.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(93, 93), pos + ImVec2(907, 657), ImColor(0, 0, 0, 28), 31.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(92, 92), pos + ImVec2(908, 658), ImColor(0, 0, 0, 25), 32.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(91, 91), pos + ImVec2(909, 659), ImColor(0, 0, 0, 22), 33.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(90, 90), pos + ImVec2(910, 660), ImColor(0, 0, 0, 20), 34.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(89.5f, 89.5f), pos + ImVec2(909, 659), ImColor(0, 0, 0, 2), 34.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(89, 89), pos + ImVec2(911, 661), ImColor(0, 0, 0, 17), 35.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(88, 88), pos + ImVec2(912, 662), ImColor(0, 0, 0, 15), 36.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(87, 87), pos + ImVec2(913, 663), ImColor(0, 0, 0, 13), 37.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(86, 86), pos + ImVec2(914, 664), ImColor(0, 0, 0, 11), 38.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(85, 85), pos + ImVec2(915, 665), ImColor(0, 0, 0, 9), 39.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(84, 84), pos + ImVec2(916, 666), ImColor(0, 0, 0, 7), 40.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(83, 83), pos + ImVec2(917, 667), ImColor(0, 0, 0, 5), 41.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(82, 82), pos + ImVec2(918, 668), ImColor(0, 0, 0, 4), 42.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(81, 81), pos + ImVec2(919, 669), ImColor(0, 0, 0, 3), 43.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(80, 80), pos + ImVec2(919, 669), ImColor(0, 0, 0, 3), 44.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(79, 79), pos + ImVec2(920, 670), ImColor(0, 0, 0, 2), 45.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(78, 78), pos + ImVec2(921, 671), ImColor(0, 0, 0, 2), 46.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(77, 77), pos + ImVec2(920, 670), ImColor(0, 0, 0, 1), 47.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);
    draw->AddRect(pos + ImVec2(76, 76), pos + ImVec2(921, 671), ImColor(0, 0, 0, 1), 48.0f, ImDrawFlags_RoundCornersBottomRight | ImDrawFlags_RoundCornersTopRight | ImDrawFlags_RoundCornersBottomLeft | ImDrawFlags_RoundCornersTopLeft);

    ImGui::PushStyleVar(ImGuiStyleVar_ChildBorderSize, 0.0f);
    ImGui::PushStyleColor(ImGuiCol_Border, ImVec4{ 0.561f, 0.657f, 0.173f, 1.0f });
    ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4{ 0.3f, 0.5f, 0.8f, 1.0f });
    ImGui::SetNextWindowPos({ pos.x + 100, pos.y + 100 });
    ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, { 25.0f });

    //the blue "main" window
    ImGui::BeginChild("main", { 800, 550 }, true);
    {

    }ImGui::EndChild();
}
ImGui::End();

The way I draw the shadow probably isn't really smart, but thats another thing.

Vucee commented 1 year ago

Are you expecting clickthroughness to be based in per pixel opacity ?

To this. No, I just want that the first window created with "Begin()" where I draw my shadow is clickthrough at all times. Doesn't matter what opacity it uses. The Next Child Window however should accept all inputs normally.

utmcontent commented 1 year ago

when docking merge to the main/master branch?

PathogenDavid commented 1 year ago

@utmcontent Please don't derail threads with unrelated questions.

There is no firm timeline, but not until 2.0 at the soonest.

loiqy commented 1 month ago

Have you resolved this issue? I'm also interested in using the docking branch and rendering shadows for each independent platform window.