How to Center Multiple Elements within a large Tabbed view

[FlogramMatt]

Version/Branch of Dear ImGui:

Dear ImGui 1.79 (17900)
--------------------------------
sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=201402
define: _WIN32
define: _WIN64
define: _MSC_VER=1927
define: __clang_version__=10.0.0 
--------------------------------
io.BackendPlatformName: imgui_impl_glfw
io.BackendRendererName: imgui_impl_opengl3
io.ConfigFlags: 0x00000000
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigWindowsMemoryCompactTimer = 60.0f
io.BackendFlags: 0x0000000E
 HasMouseCursors
 HasSetMousePos
 RendererHasVtxOffset
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64
io.DisplaySize: 1280.00,720.00
io.DisplayFramebufferScale: 1.00,1.00
--------------------------------
style.WindowPadding: 8.00,8.00
style.WindowBorderSize: 1.00
style.FramePadding: 4.00,3.00
style.FrameRounding: 0.00
style.FrameBorderSize: 0.00
style.ItemSpacing: 8.00,4.00
style.ItemInnerSpacing: 4.00,4.00

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_glfw.cpp + imgui_impl_glfw.cpp (or specify if using a custom engine/back-end)
Compiler: llvm through Visual Studio (if the question is related to building or platform specific features)
Operating System: Windows 10

My Issue/Question:

I'm trying to center multiple elements within a Tab Item. See screenshot. I would like to center the Text, InputText, and Button items, basically the whole group in the middle of the tab. I know I need to use SetCursorPos, but not sure how to get the size of the tabbed window or the size of the entire group so I can use that to calculate the new Cursor Pos. Ideally I'd like to center this both horizontally and vertically. Thanks.

Screenshots/Video

Standalone, minimal, complete and verifiable example: (see #2261)

// create the new "+" tab
if (ImGui::BeginTabItem("+", 0, ImGuiTabItemFlags_Trailing)) {
    ImGui::SetCursorPos(ImVec2(ImGui::GetCursorPosX() + 100, ImGui::GetCursorPosY()+100));

    ImGui::BeginGroup();
    ImGui::Text("Create new object with name: ");
    ImGui::SameLine();
    ImGui::SetNextItemWidth(256);
    ImGui::InputText(" ", new_object_name, IM_ARRAYSIZE(new_object_name));
    ImGui::SameLine();
    if (ImGui::Button("Create New Object")) {
        Object new_obj;
        new_obj.name = (char*)malloc(strlen(new_object_name));

        strcpy(new_obj.name, new_object_name);
	Objects.push_back(new_obj);

        new_object_name[0] = 0;
    }

    ImGui::EndGroup();

    ImGui::EndTabItem();

[ocornut]

but not sure how to get the size of the tabbed window or the size of the entire group so I can use that to calculate the new Cursor Pos

You can't without calculating it yourself.
You are on territory which is not easy to handle with a single-pass IMGUI. Most solutions involve relying on temporal coherency aka keep and reuse measures from last frame. This is e.g. what #846 is doing.
For a simple dialog it may be simpler to calculate the expected size of the group ahead yourself.

[FlogramMatt]

Makes sense, I thought that might be the answer. Would be nice if there was a way to draw it in memory or off screen or to an image buffer or something first time around, calculate the width and height(could be other things that would be nice to calculate) then every other time I could refer to those numbers(or update as needed). Or even draw it in a place I know is blank, measure cursor position change, then delete it or draw a black rectangle over it.

Is it possible for me to get the bottom right corner after I draw it? I'd be fine with getting the first corner from the cursor pos, then getting the new cursor position after and I now know the width and height. It'd be in the wrong place for a single frame, which isn't a big deal, maybe I even draw a black rectangle over it first frame after drawing. Just thinking it's going to be tricky to calculate if I start adding more and more items and don't want to recalculate for every font or worry about different OSs rendering differently or something.

Thanks.

[ocornut]

I think we ought to create a layout/output mode where ItemSize/ItemAdd would return false but take measurements, so a multi-pass approach like the one you mention would be possible.

(Not fully helping, but note that the size of items is fairly standardized. All framed widgets use FramePadding on each sides, and their base size is either based on contents (e.g. Button uses CalcTextSize(label)) either specified by user (e.g. Button optional arg) either can be retrieved with CalcItemWidth()).

then getting the new cursor position after and I now know the width and height.

Depending what your shape/contents is like, you could either

• use SameLine + retrieve cursor pos (easy, but flaky, assume last "line" has the larger width)
• reset window->DC.CursorMaxPos so you can query its value at the end of your group, then restore CursorMaxPos as the max of both value. This is what BeginGroup/EndGroup does.

Similar idea used in #1236

[FlogramMatt]

Thank you, sounds like a great idea to me. Would love to see something like that in the future. For now, will estimate or just use upper left corner or something. Thanks ocornut!