Need help on custom widget adding input text in imgui button and double click to active the input text edit

[ngminteck]

Version/Branch of Dear ImGui:

165

Back-end file/Renderer/OS: (or specify if you are using a custom engine back-end)

Back-ends: imgui_impl_opengl.cpp + imgui_impl_win32.cpp
OS: window 10
Compiler: visual studio 2017 c++ lastest

how to add function like input text that user can rename the label when double click.

Hello, sorry for asking lot of question, i trying create a custom widget like thumbnail, that it show the image and the name of the thumbnail that user can double click to rename or right click will show rename option and user can rename the thumbnail

I mainly make a copy of image button and modify it. i want to add the feature like imgui::input text instead using text alone.

Standalone, minimal, complete and verifiable example: (see CONTRIBUTING.md)

bool ImGui::ThumbNail(ImTextureID user_texture_id, const ImVec2& size, const ImVec2& uv0, const ImVec2& uv1, int frame_padding, const ImVec4& bg_col, const ImVec4& tint_col, std::string* label, bool double_click)
{
	ImGuiButtonFlags button_flags = 0;
	if(double_click)
		button_flags |= ImGuiButtonFlags_PressedOnClickRelease | ImGuiButtonFlags_PressedOnDoubleClick;
	
	ImGuiWindow* window = GetCurrentWindow();
	if (window->SkipItems)
		return false;

	ImGuiContext& g = *GImGui;
	const ImGuiStyle& style = g.Style;

	// Default to using texture ID as ID. User can still push string/integer prefixes.
	// We could hash the size/uv to create a unique ID but that would prevent the user from animating UV.
	//PushID((void*)(intptr_t)user_texture_id);
	const ImGuiID id = window->GetID(label->c_str());
	const ImVec2 label_size = CalcTextSize(label->c_str(), NULL, true);
	
	//PopID();

	// add 3 font size to y for button rectangle height;
	ImVec2 button_size = size;
	button_size.y += label_size.y * 2;

	const ImVec2 padding = (frame_padding >= 0) ? ImVec2((float)frame_padding, (float)frame_padding) : style.FramePadding;
	const ImRect bb(window->DC.CursorPos, window->DC.CursorPos + button_size + padding * 2);
	const ImRect image_bb(window->DC.CursorPos + padding, window->DC.CursorPos + padding + size);
	ItemSize(bb);
	if (!ItemAdd(bb, id))
		return false;

	bool hovered, held;
	bool pressed = ButtonBehavior(bb, id, &hovered, &held, button_flags);

	// Render
	const ImU32 col = GetColorU32((held && hovered) ? ImGuiCol_ButtonActive : hovered ? ImGuiCol_ButtonHovered : ImGuiCol_Button);
	RenderNavHighlight(bb, id);
	RenderFrame(bb.Min, bb.Max, col, true, ImClamp((float)ImMin(padding.x, padding.y), 0.0f, style.FrameRounding));
	if (bg_col.w > 0.0f)
		window->DrawList->AddRectFilled(image_bb.Min, image_bb.Max, GetColorU32(bg_col));
	window->DrawList->AddImage(user_texture_id, image_bb.Min, image_bb.Max, uv0, uv1, GetColorU32(tint_col));
	
	// offset the thumbnail max y + padding.y
	ImRect offset = bb;
	offset.Min.y = image_bb.Max.y + padding.y;
	// render the text
	RenderTextClipped(offset.Min + style.FramePadding, offset.Max - style.FramePadding, label->c_str(), NULL, &label_size, style.ButtonTextAlign, &offset);

	//std::stringstream input_text_label;
	//input_text_label.str(std::string());
	//input_text_label << "##" << label;

	//ImGuiInputTextFlags text_flag = ImGuiInputTextFlags_None;
	//ImGui::InputText(input_text_label.str().c_str(), label->data(), 64, text_flag, NULL, NULL);


	return pressed;
}

Screenshots/Video (you can drag files here)

[ocornut]

You might:

1. Just spawn an InputText() widget instead of the label. Your context menu would somehow need to communicate to the widget that it wants text editing.

2. Try to use InputScalarAsWidgetReplacement() although that's not really documented and subjected to changes in the future. Note that I pushed a small change to it (commit above) to facilitate use in external scenario.

3. Otherwise, the simpler/faster/recommended approach would be to handle renaming within your context menu popup. Instead of the Rename button you can use an InputText directly in the context menu.