What's the proper way to render custom text or custom items in the "key"/"label" of a TreeNode? #7505

New issue

Closed

opened 2024-04-18 00:54:50 +00:00 by kalebs-anotheraxiom · 0 comments

kalebs-anotheraxiom commented

2024-04-18 00:54:50 +00:00

(Migrated from github.com)

Version/Branch of Dear ImGui:

v1.90.1 WIP + docking

Back-ends:

N/A

Compiler, OS:

Windows

Full config/build information:

Dear ImGui 1.90.1 WIP (19002)
--------------------------------
sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=199711
define: _WIN32
define: _WIN64
define: _MSC_VER=1929
define: _MSVC_LANG=201703
define: IMGUI_HAS_VIEWPORT
define: IMGUI_HAS_DOCK
--------------------------------
io.BackendPlatformName: NULL
io.BackendRendererName: NULL
io.ConfigFlags: 0x00000041
 NavEnableKeyboard
 DockingEnable
io.ConfigViewportsNoDecoration
io.ConfigInputTextCursorBlink
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x00000000
--------------------------------
io.Fonts: 2 fonts, Flags: 0x00000000, TexSize: 1024,1024
io.DisplaySize: 2981.00,766.00
io.DisplayFramebufferScale: 1.00,1.00
--------------------------------
style.WindowPadding: 10.00,13.00
style.WindowBorderSize: 1.00
style.FramePadding: 10.00,6.00
style.FrameRounding: 2.00
style.FrameBorderSize: 0.00
style.ItemSpacing: 12.00,7.00
style.ItemInnerSpacing: 11.00,4.00

Details:

What's the Proper way to render custom text or custom items in the body of a TreeNode :

I am creating a general Tree style console application and want to be able to do more then the standard TreeNode label that TreeNode provides.

For example id like to be able to have the Arrow, Blue text, And then a white colon
Tree Screenshot
The current solution is

ImGui::PushID(KeyVal);
bool IsOpen = ImGui::TreeNode("");
ImGui::SameLine();
ImGui::TextColored(Color, "%s", KeyVal);
ImGui::SameLine(0, 0);
ImGui::Text(": ");
if (IsOpen) 
{
	// ...
	ImGui::TreePop();
}
ImGui::PopID();

But there's one fairly glaring issue with this. Its that the Text "SubObject" Is far too close to the Arrow. When i add Text into the Label the spacing looks correct. But for some reason things behave slightly differently when you pass in a blank label. I'm aware i can probably just manually set the X Cursor position to be the start of the line + ImGui::GetTreeNodeToLabelSpacing(), Or find the magic value to indent by. But I am just wondering if there is a cleaner way to go about it.

Screenshots/Video:

Minimal, Complete and Verifiable Example code:

// Here's some code anyone can copy and paste to reproduce your issue
ImGui::PushID(KeyVal);
bool IsOpen = ImGui::TreeNode("");
ImGui::SameLine();
ImGui::TextColored(Color, "%s", KeyVal);
ImGui::SameLine(0, 0);
ImGui::Text(": ");
if (IsOpen) 
{
	// ...
	ImGui::TreePop();
}
ImGui::PopID();

### Version/Branch of Dear ImGui: v1.90.1 WIP + docking ### Back-ends: N/A ### Compiler, OS: Windows ### Full config/build information: ``` Dear ImGui 1.90.1 WIP (19002) -------------------------------- sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20 define: __cplusplus=199711 define: _WIN32 define: _WIN64 define: _MSC_VER=1929 define: _MSVC_LANG=201703 define: IMGUI_HAS_VIEWPORT define: IMGUI_HAS_DOCK -------------------------------- io.BackendPlatformName: NULL io.BackendRendererName: NULL io.ConfigFlags: 0x00000041 NavEnableKeyboard DockingEnable io.ConfigViewportsNoDecoration io.ConfigInputTextCursorBlink io.ConfigMemoryCompactTimer = 60.0 io.BackendFlags: 0x00000000 -------------------------------- io.Fonts: 2 fonts, Flags: 0x00000000, TexSize: 1024,1024 io.DisplaySize: 2981.00,766.00 io.DisplayFramebufferScale: 1.00,1.00 -------------------------------- style.WindowPadding: 10.00,13.00 style.WindowBorderSize: 1.00 style.FramePadding: 10.00,6.00 style.FrameRounding: 2.00 style.FrameBorderSize: 0.00 style.ItemSpacing: 12.00,7.00 style.ItemInnerSpacing: 11.00,4.00 ``` ### Details: **What's the Proper way to render custom text or custom items in the body of a TreeNode :** I am creating a general Tree style console application and want to be able to do more then the standard TreeNode label that TreeNode provides. For example id like to be able to have the Arrow, Blue text, And then a white colon <img width="400" alt="Tree Screenshot" src="https://github.com/ocornut/imgui/assets/127455380/f13ac207-a556-4b76-b640-8838a063d54b"> The current solution is ```cpp ImGui::PushID(KeyVal); bool IsOpen = ImGui::TreeNode(""); ImGui::SameLine(); ImGui::TextColored(Color, "%s", KeyVal); ImGui::SameLine(0, 0); ImGui::Text(": "); if (IsOpen) { // ... ImGui::TreePop(); } ImGui::PopID(); ``` But there's one fairly glaring issue with this. Its that the Text "SubObject" Is far too close to the Arrow. When i add Text into the Label the spacing looks correct. But for some reason things behave slightly differently when you pass in a blank label. I'm aware i can probably just manually set the X Cursor position to be the start of the line + ImGui::GetTreeNodeToLabelSpacing(), Or find the magic value to indent by. But I am just wondering if there is a cleaner way to go about it. ### Screenshots/Video: <img width="480" alt="UnrealEditor-Win64-DebugGame_4KYRm7E8p7" src="https://github.com/ocornut/imgui/assets/127455380/ee00625e-ee06-4047-8564-800dda09b2ea"> <img width="330" alt="UnrealEditor-Win64-DebugGame_E3XPtNqZgO" src="https://github.com/ocornut/imgui/assets/127455380/ff4cceca-024c-4222-b01c-93083c70426e"> ### Minimal, Complete and Verifiable Example code: ```cpp // Here's some code anyone can copy and paste to reproduce your issue ImGui::PushID(KeyVal); bool IsOpen = ImGui::TreeNode(""); ImGui::SameLine(); ImGui::TextColored(Color, "%s", KeyVal); ImGui::SameLine(0, 0); ImGui::Text(": "); if (IsOpen) { // ... ImGui::TreePop(); } ImGui::PopID(); ```