What's the proper way to render custom text or custom items in the "key"/"label" of a TreeNode? about imgui HOT 8 CLOSED

I don't think there is a "clean" way to do this. If you want to replicate the offset exactly, you can find how to calculate it in the first few lines of ImGui::TreeNodeBehavior(). Doable, but not ideal in case this implementation ever changes.

Still a hack, but maybe a bit cleaner since you won't need to replicate calculations: you could add a singular space as a label and adjust the cursor position by the width of that space. Still better (in case you want f.e. navigation rects of the correct size): you can submit a full size label with all characters replaced by spaces. and adjust the cursor position by the entire text width. That should work as long as you don't use a proportional custom font.

from imgui.

It seems like a bug to me that TreeNode("##EmptyLabel") doesn't allow for that by default.

from imgui.

I'm sincerely surprised this has not been submitted before.

By sheer accident, with the default style settings if you do what you did (TreeNode("") + SameLine()) it looks correct, but it's only accidentally because ItemSpacing.x = FramePadding.x * 2 with default settings. This is the reason I haven't noticed that before :(

If I rewind history, the code was notably modified in 370de41, some refactor 4006fb7, split layout vs interact bb in c381d58, The later is what introduced the (label_size.x > 0.0f) test. We are talking ancient times (#282) but that specific change wasn't exactly the main point of the commit.

I'll push a fix soon.

from imgui.

:(
Well that's the beauty of open source, Eventually someone's gonna use every line of code at one point or another so stuff like this will get caught. Glad I could help out and make this project just a little bit better.

Ill probably end up going with some sort of space padded solution to maintain the ability to click on the label or just doing it via TreeNodeBehavior so i can get more finetune control on the bounding boxes

from imgui.

Ill probably end up going with some sort of space padded solution to maintain the ability to click on the label or just doing it via TreeNodeBehavior so i can get more finetune control on the bounding boxes

You probably want to use ImGuiTreeNodeFlags_SpanAvailWidth here, and possibly ImGuiTreeNodeFlags_AllowOverlap if you also need to add e.g. SmallButton() on the same line.

from imgui.

I've pushed a fix 361432a however this is a breaking fix, and I need to share my reasoning.

First of all, we want TreeNode("Hello"), SameLine(), Text("World") to be unaltered since this is a frequent pattern and it works. That's for sure.

// Old code
const float text_width = g.FontSize + (label_size.x > 0.0f ? label_size.x + padding.x * 2 : 0.0f);  // Include collapsing arrow
layout_width = text_width;

I tried two approaches:

// New 1
const float text_width = g.FontSize + label_size.x + padding.x * 2;
layout_width = text_width;

New 1 embeds the arrow padding. It's standard and doesn't look hacky. But it breaks every TreeNode(""), SameLine() use which needs to be changed into TreeNode(), SameLine(0,0).
Pros: it's fairly consistent.
Pros: it visibly breaks regardless of styling value: issue not hidden in default style.
Cons: it visibly breaks regardless of styling value: issue not hidden in default style. :)

// New 2
const float text_width = g.FontSize + label_size.x + padding.x * 2;
layout_width = text_width + (label_size.x > 0.0f ? 0.0f : -style.ItemSpacing.x);

New 2 tries to undo the effect of SameLine().
Pros: it breaks less case.
Cons: it's less consistent, it'sweird and I've learned enough about the troubles of selectable and treenode doing inconsistent hacks that I would prefer to stay clear of them.

So I went for New 1. Which is more breaking, but ultimately this idiom is not used by everyone.

There's an additional quirk which is that interact_bb is altered differently when label_size.x but I think it does make sense as when you use an empty label you are likely to add an immediately neighbor item, and if that item is interactive (a button) you need to avoid tree node overlapping it. Either way as mentioned users of TreeNode("") are likely to use ImGuiTreeNodeFlags_SpanAvailWidth and ImGuiTreeNodeFlags_AllowOverlap anyhow.

PS: There are no matches for neither TreeNode("") and TreeNode("##xxx"); in the demo code.

from imgui.

Added a test ocornut/imgui_test_engine@fac000b

Closing as solved!

from imgui.

🥳 Glad I was able to help! ImGUI is such a cool project and I love improving the tools I use

from imgui.