Splitter

[codz01]

Hi
is it possible to add splitter between 2 widgets ? . if no then i hope you consider it as a todo :) , because changing layout space in realtime is really good thing .

[ocornut]

EDITED 2018: If you are stumbling on this thread, read the post at the end of the thread, tl;dr; you can use SplitterBehavior in imgui_internal.h as a helper

There's a Columns() API that does some of that, depending exactly what is your use case and what you are trying to do. Splitter is a rather vague term.

For high-level layout you can possibly get away by implementing cheap splitters yourself:
#125 (comment)

[ocornut]

But yes I agree we need better moveable separator in general.

[codz01]

thanks
yes that #125 (comment) what i was aiming for
in the example you provide , some times if i click on the separator it didn't move but the whole window moves instead .

[ocornut]

Where are you clicking for it to not work? You can replace InvisibleButton() by Button() to see them.

[codz01]

Oops , seems i was trying with an old version of imgui , now i am switching to 1.45 and it works fine now ;)
many thanks

[ocornut]

Reused this idiom in an app. The code is app specific here, we'd want to formalize into an official API call once we can figure out an api to handle n-part splitting.

• Using a dedicated function instead of Button() would allow to remove a one-frame lag with the drawing, which I am avoiding here by not drawing anything when mouse button is held, which is an ok workaround.

• The colors could be moved to style (not sure about that?).

• I'm using an internal feature here SetItemAllowOverlap to allow widget to cover the splitter, that also could be exposed in the public API. EDIT This is now a public api.

void DrawSplitter(int split_vertically, float thickness, float* size0, float* size1, float min_size0, float min_size1)
{
    ImVec2 backup_pos = ImGui::GetCursorPos();
    if (split_vertically)
        ImGui::SetCursorPosY(backup_pos.y + *size0);
    else
        ImGui::SetCursorPosX(backup_pos.x + *size0);

    ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0,0,0,0));
    ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0,0,0,0));          // We don't draw while active/pressed because as we move the panes the splitter button will be 1 frame late
    ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0.6f,0.6f,0.6f,0.10f));
    ImGui::Button("##Splitter", ImVec2(!split_vertically ? thickness : -1.0f, split_vertically ? thickness : -1.0f));
    ImGui::PopStyleColor(3);

    ImGui::SetItemAllowOverlap(); // This is to allow having other buttons OVER our splitter. 

    if (ImGui::IsItemActive())
    {
        float mouse_delta = split_vertically ? ImGui::GetIO().MouseDelta.y : ImGui::GetIO().MouseDelta.x;

        // Minimum pane size
        if (mouse_delta < min_size0 - *size0)
            mouse_delta = min_size0 - *size0;
        if (mouse_delta > *size1 - min_size1)
            mouse_delta = *size1 - min_size1;

        // Apply resize
        *size0 += mouse_delta;
        *size1 -= mouse_delta;
    }
    ImGui::SetCursorPos(backup_pos);
}

Usage

DrawSplitter(); // code above
BeginChild(...); // pass width here
EndChild()
SameLine()
BeglnChild(...); // pass width here
EndChild()

[idodoyo]

nice. move tutorial will be great!

Hi,

I have try to change the mouse cursor once we are over the split bar, but nothing is changing :

if (GImGui->HoveredIdAllowHoveringOthers && horizontal_splitter)
ImGui::SetMouseCursor(ImGuiMouseCursor_ResizeNS);

    else if (GImGui->HoveredIdAllowHoveringOthers && !horizontal_splitter)
        ImGui::SetMouseCursor(ImGuiMouseCursor_ResizeEW);

    else
        ImGui::SetMouseCursor(ImGuiMouseCursor_Arrow);

[ocornut]

@ghost Sorry I missed this question. Is your binding applying the hardware mouse cursor as requested by ImGui? (by reading GetMouseCursor). ImGui can display a software cursor for you but hardware are much much more pleasant so it is better to avoid them if you can.

FYI

Today I have added a ImGuiButtonFlags_AllowOverlapMode flag to the ButtonEx() function declared in imgui_internal.h. This is useful if you want to create invisible splitter than are using left-over space not used by other widgets, as shown in the bottom splitter in my GIF above.

It previously worked because I was using an alpha of 0.0 for the splitter hovered color, so when hovering a button you wouldn't see that the splitter was actually seeing itself as hovered as well. With that new flag we can now implement a splitter that has a hovered color and still allow for overlapping widgets.