Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multicomponent widgets don't resize smoothly (PushMultiItemsWidths) #7120

Closed
Nahor opened this issue Dec 11, 2023 · 1 comment
Closed

Multicomponent widgets don't resize smoothly (PushMultiItemsWidths) #7120

Nahor opened this issue Dec 11, 2023 · 1 comment

Comments

@Nahor
Copy link
Contributor

Nahor commented Dec 11, 2023

Version/Branch of Dear ImGui:

Version: v1.90

My Issue/Question:

With 3+ components, the way PushMultiItemsWidths computes the width causes some "wave" when resizing a window. The more components there are, the more noticeable the effect.

The issue is that that the width of most components is set to the same value with the last component taking what's left. So in some cases, when the size of the whole widget is changed by one pixel, it can cause that common width to change by one pixel as well. This gets multiplied by the number of component-1. So the last component width will change by component-2 pixels in the other direction

Another issue is that components in one widget don't always align with components in another (see the video, where every component of the 4-component widget should align with every 5th component in the 20-component widget)

Screenshots/Video
In the video, note how the last component sometimes grows (resp. shrinks) as a reduce (resp. expand) the size of the window

PushMultiItemsWidths.mp4

The "Original" section is how the ImGui code currently works. The "Fixed" is with a corrected version of the algorithm.

Standalone, minimal, complete and verifiable example:

int components = 20;
ImGui::PushMultiItemsWidths(components, ImGui::CalcItemWidth());
ImGui::PushID("Test");
for (int i = 0; i < components; i++) {
    char buf[10] = {};
    if (i != 0) {
        ImGui::SameLine(0, ImGui::GetCurrentContext()->Style.ItemInnerSpacing.x);
    }
    ImGui::PushID(i);
    ImGui::InputText("", buf, IM_ARRAYSIZE(buf));
    ImGui::PopItemWidth();
    ImGui::PopID();
}
ImGui::PopID();
Nahor added a commit to Nahor/imgui that referenced this issue Dec 11, 2023
In the previous algorithm, all components were of the same width except for
the last. That last one was using the remainder.
This meant that any error in that common width (caused by the truncation
to the nearest pixel/integer), was getting accumulated and propagated into
that last component.

The new algorithm avoid this issue by computing where each component should
start, with the width being the difference between those locations.
In essence, this spreads the errors over multiple components instead of
just the last one.
ocornut pushed a commit that referenced this issue Dec 11, 2023
…ve multi-components width computation to better distribute the error. (#7120, #7121)
@ocornut
Copy link
Owner

ocornut commented Dec 11, 2023

Closed by #7121, thank you!

@ocornut ocornut closed this as completed Dec 11, 2023
Nahor added a commit to Nahor/imgui that referenced this issue Dec 12, 2023
Nahor added a commit to Nahor/imgui that referenced this issue Dec 13, 2023
In the previous algorithm, all components were of the same width except for
the last. That last one was using the remainder.
This meant that any error in that common width (caused by the truncation
to the nearest pixel/integer), was getting accumulated and propagated into
that last component.

The new algorithm avoid this issue by computing where each component should
start, with the width being the difference between those locations.
In essence, this spreads the errors over multiple components instead of
just the last one.
Nahor added a commit to Nahor/imgui that referenced this issue Dec 13, 2023
ocornut added a commit that referenced this issue Dec 19, 2023
… multi-components width in tight space (#7120, #7121)

+ extra tweak color ColorEdit4() label. Amend 86512ea, 3464662
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants