Icons in the tree

[emoon]

Hi,

I wonder if it is currently possible to have custom icons in the tree view? (that would be infront of the text and for the folded/unfolded state)

Think of something like an explorer view/Visual Studio Workspace of files view

[ocornut]

There's a few way you can do that but the correct one will have to wait until I make a change to TreeNode - I started it but shelved it.

Currently if you do TreeNode("##hiddenlabel", ...); SameLine(0, 0); you can already add stuff.

There's will several issues:

• Tree node will only react to click over roughly the width of the label (this was intentional to allow other widgets such as buttons to be used on the same line).
• Undesired horizontal spacing (visible here)
• If your widget have bigger height, the tree node won't be correctly vertically aligned.

So what we need to do is:

• Make it an option up to decide the width of the hit box for input processing (up to label or up to a certain X position, typically edge of the screen but it can be shorter also). I don't yet know what form this option can take, how it'll be specified and stored.
• Fix the undesired horizontal spacing.
• Fix the height issues, not sure what's the correct way here. User may want to adjust the tree node height to match other widget height in some instances (e.g. adding a bigger icon) but not in other instances (e.g. adding a tree node on the side of a very large widget), so it may be an option as well or maybe to simplify the height can be capped to widget-height by default so the two typical height will be text-height and widget-height.

You can temporarily hack around your way from those problems by passing a tree node label full of spaces to get a larger hit box, and moving the cursor SetCursorPosX(GetCursorPosX() - 20.0f) after SameLine.

[emoon]

Thanks for the reply.

I will go for your temporary hack for now.

[ocornut]

If you use spaces for id remember to do a prior PushId/PopId to make the full-id unique.

[emoon]

Will do. Thanks!

[ocornut]

I wonder if it is currently possible to have custom icons in the tree view? (that would be infront of the text and for the folded/unfolded state)

Did you mean you wanted to remove the ">" thingie and draw an icon instead?

[ocornut]

Btw you can rewrite a pretty much feature-identical custom tree node this way.
The main problem with that approach is that it is probably 10+ times slower than the version that pokes at data structure directly. (haven't measure, just guessed). Because of going through those public apis. Using imgui_internal.h would be beneficial.

ImGui::Begin("Custom Tree Node");

bool MyTreeNode(const char* label)
{
    const ImGuiStyle& style = ImGui::GetStyle();
    ImGuiStorage* storage = ImGui::GetStateStorage();

    ImU32 id = ImGui::GetID(label);
    int opened = storage->GetInt(id, 0);
    float x = ImGui::GetCursorPosX();
    ImGui::BeginGroup();
    if (ImGui::InvisibleButton(label, ImVec2(-1, ImGui::GetWindowFontSize()+style.FramePadding.y*2)))
    {
        int* p_opened = storage->GetIntRef(id, 0);
        opened = *p_opened = !*p_opened;
    }
    bool hovered = ImGui::IsItemHovered();
    bool active = ImGui::IsItemActive();
    if (hovered || active)
        ImGui::GetWindowDrawList()->AddRectFilled(ImGui::GetItemBoxMin(), ImGui::GetItemBoxMax(), ImColor(ImGui::GetStyle().Colors[active ? ImGuiCol_HeaderActive : ImGuiCol_HeaderHovered]));

    // Icon, text
    ImGui::SameLine(x);
    ImGui::ColorButton(opened ? ImColor(255,0,0) : ImColor(0,255,0));
    ImGui::SameLine();
    ImGui::Text(label);
    ImGui::EndGroup();
    if (opened)
        ImGui::TreePush(label);
    return opened != 0;
};

if (MyTreeNode("Hello"))
{
    ImGui::Text("blah");
    if (mytreenode("blah"))
    {
        ImGui::Text("Hello");
        ImGui::TreePop();
    }
    ImGui::Text("blah");
    ImGui::TreePop();
}

ImGui::End();

(gifcam is creating undesired transparent color in the GIF, the color square should be green when it's not red)

[ocornut]

And that's the exact same feature but using some internal data structure.

#include <imgui_internal.h>
bool MyTreeNode(const char* label)
{
    ImGuiState& g = *GImGui;
    ImGuiWindow* window = g.CurrentWindow;

    ImU32 id = window->GetID(label);
    int opened = window->StateStorage.GetInt(id, 0);
    ImVec2 pos = window->DC.CursorPos;
    if (ImGui::InvisibleButton(label, ImVec2(-1, g.FontSize + g.Style.FramePadding.y*2)))
    {
        int* p_opened = window->StateStorage.GetIntRef(id, 0);
        opened = *p_opened = !*p_opened;
    }
    bool hovered = ImGui::IsItemHovered();
    bool active = ImGui::IsItemActive();
    if (hovered || active)
        window->DrawList->AddRectFilled(window->DC.LastItemRect.Min, window->DC.LastItemRect.Max, window->Color(active ? ImGuiCol_HeaderActive : ImGuiCol_HeaderHovered));

    // Icon, text
    float button_sz = g.FontSize + g.Style.FramePadding.y*2;
    window->DrawList->AddRectFilled(pos, ImVec2(pos.x+button_sz, pos.y+button_sz), opened ? ImColor(255,0,0) : ImColor(0,255,0));
    ImGui::RenderText(ImVec2(pos.x + button_sz + g.Style.ItemInnerSpacing.x, pos.y + g.Style.FramePadding.y), label);
    if (opened)
        ImGui::TreePush(label);
    return opened != 0;
}

[ocornut]

Perhaps I can turn part of this, or actually the underlying behavior which does a little more, into a TreeNodeBehavior().

[ocornut]

Made some change so you can write a custom tree node that is more accurate in term of honoring Auto-Expand-Node-On-Logging and SetNextTreeNode** calls.

#include <imgui_internal.h>

bool MyTreeNode(const char* label)
{
    ImGuiState& g = *GImGui;
    ImGuiWindow* window = g.CurrentWindow;

    ImU32 id = window->GetID(label);
    ImVec2 pos = window->DC.CursorPos;
    ImRect bb(pos, ImVec2(pos.x + ImGui::GetContentRegionAvail().x, pos.y + g.FontSize + g.Style.FramePadding.y*2));
    bool opened = ImGui::TreeNodeBehaviorIsOpened(id);
    bool hovered, held;
    if (ImGui::ButtonBehavior(bb, id, &hovered, &held, true))
        window->DC.StateStorage->SetInt(id, opened ? 0 : 1);
    if (hovered || held)
        window->DrawList->AddRectFilled(bb.Min, bb.Max, window->Color(held ? ImGuiCol_HeaderActive : ImGuiCol_HeaderHovered));

    // Icon, text
    float button_sz = g.FontSize + g.Style.FramePadding.y*2;
    window->DrawList->AddRectFilled(pos, ImVec2(pos.x+button_sz, pos.y+button_sz), opened ? ImColor(255,0,0) : ImColor(0,255,0));
    ImGui::RenderText(ImVec2(pos.x + button_sz + g.Style.ItemInnerSpacing.x, pos.y + g.Style.FramePadding.y), label);

    ImGui::ItemSize(bb, g.Style.FramePadding.y);
    ImGui::ItemAdd(bb, &id);

    if (opened)
        ImGui::TreePush(label);
    return opened;
}

Until I add a mechanism to parametrize how far the hit-rectangle of a treenode.should reach, this is probably the best way to just make something fully custom, Not particularly great looking but it's not the type of code you would often look back at.

[emoon]

Neat :) Thanks!

[ocornut]

Closing this afaik the original post is answered. Ideally we'd simplify the code for MyTreeNode() further and improve forward compatibility, but it's not too bad now.

(EDIT adding midly related attachment after the fact so I can link to it from another forum)

[tuket]

This is very old... ImGui API has changed and this code doesn't work any more. Is there any more up to date sample code around?

[UnfinishedBusiness]

@tuket - Here is his function ported to version 1.90 WIP. You should be able to modify it to your needs

#include <imgui_internal.h>
    bool MyTreeNode(const char* label)
    {
        ImGuiContext& g = *ImGui::GetCurrentContext();
        ImGuiWindow* window = g.CurrentWindow;

        ImGuiID id = window->GetID(label);
        ImVec2 pos = window->DC.CursorPos;
        ImRect bb(pos, ImVec2(pos.x + ImGui::GetContentRegionAvail().x, pos.y + g.FontSize + g.Style.FramePadding.y*2));
        bool opened = ImGui::TreeNodeBehaviorIsOpen(id, ImGuiTreeNodeFlags_None);
        bool hovered, held;
        if (ImGui::ButtonBehavior(bb, id, &hovered, &held, ImGuiButtonFlags_PressedOnClick))
            window->DC.StateStorage->SetInt(id, opened ? 0 : 1);
        if (hovered || held)
            window->DrawList->AddRectFilled(bb.Min, bb.Max, ImGui::GetColorU32(held ? ImGuiCol_HeaderActive : ImGuiCol_HeaderHovered));

        // Icon, text
        float button_sz = g.FontSize + g.Style.FramePadding.y*2;
        window->DrawList->AddRectFilled(pos, ImVec2(pos.x+button_sz, pos.y+button_sz), ImGui::GetColorU32(opened ? IM_COL32(255,0,0,255) : IM_COL32(0,255,0,255)));
        ImGui::RenderText(ImVec2(pos.x + button_sz + g.Style.ItemInnerSpacing.x, pos.y + g.Style.FramePadding.y), label);

        ImGui::ItemSize(bb, g.Style.FramePadding.y);
        ImGui::ItemAdd(bb, id);

        if (opened)
            ImGui::TreePush(label);
        return opened;
    }