TreeNode with arbitrarily sized Icon between arrow and text

[hugoam]

Hello :) I am trying to create a widget tree with icons embedded in the TreeNode headers. The catch is that those icons are significantly bigger than the main font, and this is why so far I haven't found any way to achieve this result with Imgui

• So my first approach was to try to hack TreeNode to accept an additional image parameter, but I discovered that the TreeNodeBehavior logic is way too complicated to successfully hack it to add an image and still have correct size management. If someone more Imgui internals savy could help me do this it would be awesome though
• My second approach, as it's the "official" solution on this issue TreeNode with icon between arrow and text #1863, was to use Imgui capacity to embed icons in fonts, to embed all my icons there. But I discovered the catch above prevents to do this as well: because my icons are significantly bigger than the main font (think 32 pixel icons with a 13 pixels font), this simply does not work
• I even tried merging a normal sized font backwards into a 32 pixel font with only my icons, and use that font only for the nodes that have icons, but this causes further issues because the symbols like bullet symbols are of the size of the main font

If you have any advice on how I could possibly achieve this result, even by customizing some Imgui code somewhere, it would be greatly appreciated !

[ocornut]

Hello,

How do you expect things to look with an icon that's significantly bigger?
Bullet, very large icon, small text vertically centered on that line?

Normally TreeNode adjust for the text baseline and height of the line.

ImGui::SetNextItemWidth(50.0f);
ImGui::SliderFloat("##Framed", &f, 0.0f, 1.0f);
ImGui::SameLine();
if (ImGui::TreeNode("TreeNode"))
    ImGui::TreePop();

Larger padding to make it more visible

ImGui::SetNextItemWidth(50.0f);
ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(0, 20));
ImGui::SliderFloat("##Framed", &f, 0.0f, 1.0f);
ImGui::PopStyleVar();
ImGui::SameLine();
if (ImGui::TreeNode("TreeNode"))
    ImGui::TreePop();

vs

bool open = ImGui::TreeNode("##TreeNodeWithNoVisibeLabels");
ImGui::SameLine();
ImGui::SetNextItemWidth(50.0f);
ImGui::SliderFloat("##Framed", &f, 0.0f, 1.0f);
if (open)
    ImGui::TreePop();

We're missing helper functions to explicitly manipulate text baseline without touching other things.
I'll investigate it.

[hugoam]

Anything would be fine really, for now the issue is that I can't find a way to do arrow - 32px icon - 13px text all nicely inside the tree node header at all, and since this is a rough debug UI, the former or the latter would probably both be fine for our use case. Then it's always good to have some sort of alignment control, but that's more icing on the cake

[ocornut]

I'm struggling to understand how "32 px icon 13 px text" can look right on a same line so it is a bizarre thing to aim at IHMO but either way it should be possible.

I'm looking at it and there's a bug in TreeNodeBehavior(). Actually, in my second example above, it looks right on that screenshot but highlight and hit-testing will be wrong. The problem is how TreeNode clamp both its height and the text baseline it uses. This was originally designed to make things like:

ImGui::ColorButton("##Image", ImVec4(1, 0, 0, 1), 0, ImVec2(60,60)); // Imagine this is an image
ImGui::SameLine();
if (ImGui::TreeNode("TreeNode"))
    ImGui::TreePop();

You could argue that in some situation you'd want the tree node to cover the entire height and in some situations not. Right now it's always doing the later.

The effect of that code in TreeNodeBehavior makes it (currently) impossible for the node to cover more than the typical framed height (text height + padding * 2). It's a problematic limitation.

I'll see what I can come up with (won't be able today but I'll try this week). (And I argue it would be nice to refactor TreeNodeBehavior into something less messy and more flexible)

[TomieAi]

any solution? i really like ImGui::TreeNode with textureid param.. that will be lit