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

Narrow ellipsis implementation. #2775

Closed
wants to merge 1 commit into from
Closed

Conversation

rokups
Copy link
Contributor

@rokups rokups commented Sep 5, 2019

This changeset implements several pieces of the puzzle that add up to a narrow ellipsis rendering.

EllipsisCodePoint

ImFontConfig and ImFont received ImWchar EllipsisCodePoint = -1; field. User may configure ImFontConfig::EllipsisCodePoint a unicode codepoint that will be used for rendering narrow ellipsis. Not setting this field will automatically detect a suitable character or fall back to rendering 3 dots with minimal spacing between them. Autodetection prefers codepoint 0x2026 (narrow ellipsis) and falls back to 0x0085 (NEXT LINE) when missing. Wikipedia indicates that codepoint 0x0085 was used as ellipsis in some older windows fonts. So does default Dear ImGui font. When user is merging fonts - first configured and present ellipsis codepoint will be used, ellipsis characters from subsequently merged fonts will be ignored.

Narrow ellipsis

Rendering a narrow ellipsis is surprisingly not straightforward task. There are cases when ellipsis is bigger than the last visible character therefore RenderTextEllipsis() has to hide last two characters. In a subset of those cases ellipsis is as big as last visible character + space before it. RenderTextEllipsis() tries to work around this case by taking free space between glyph edges into account. Code responsible for this functionality is within if (text_end_ellipsis != text_end_full) { ... }.

Fallback (manually rendered dots)

There are cases when font does not have ellipsis character defined. In this case RenderTextEllipsis() falls back to rendering ellipsis as 3 dots, but with reduced spacing between them. 1 pixel space is used in all cases. This results in a somewhat wider ellipsis, but avoids issues where spaces between dots are uneven (visible in larger/monospace fonts) or squish dots way too much (visible in default font where dot is essentially a pixel). This fallback method obsoleted RenderPixelEllipsis() and this function was removed. Note that fallback ellipsis will always be somewhat wider than it could be, however it will fit in visually into every font used unlike what RenderPixelEllipsis() produced.

This changeset implements several pieces of the puzzle that add up to a narrow ellipsis rendering.

## EllipsisCodePoint

`ImFontConfig` and `ImFont` received `ImWchar EllipsisCodePoint = -1;` field. User may configure `ImFontConfig::EllipsisCodePoint` a unicode codepoint that will be used for rendering narrow ellipsis. Not setting this field will automatically detect a suitable character or fall back to rendering 3 dots with minimal spacing between them. Autodetection prefers codepoint 0x2026 (narrow ellipsis) and falls back to 0x0085 (NEXT LINE) when missing. Wikipedia indicates that codepoint 0x0085 was used as ellipsis in some older windows fonts. So does default Dear ImGui font. When user is merging fonts - first configured and present ellipsis codepoint will be used, ellipsis characters from subsequently merged fonts will be ignored.

## Narrow ellipsis

Rendering a narrow ellipsis is surprisingly not straightforward task. There are cases when ellipsis is bigger than the last visible character therefore `RenderTextEllipsis()` has to hide last two characters. In a subset of those cases ellipsis is as big as last visible character + space before it. `RenderTextEllipsis()` tries to work around this case by taking free space between glyph edges into account. Code responsible for this functionality is within `if (text_end_ellipsis != text_end_full) { ... }`.

## Fallback (manually rendered dots)

There are cases when font does not have ellipsis character defined. In this case RenderTextEllipsis() falls back to rendering ellipsis as 3 dots, but with reduced spacing between them. 1 pixel space is used in all cases. This results in a somewhat wider ellipsis, but avoids issues where spaces between dots are uneven (visible in larger/monospace fonts) or squish dots way too much (visible in default font where dot is essentially a pixel). This fallback method obsoleted `RenderPixelEllipsis()` and this function was removed. Note that fallback ellipsis will always be somewhat wider than it could be, however it will fit in visually into every font used unlike what `RenderPixelEllipsis()` produced.
ocornut pushed a commit that referenced this pull request Sep 17, 2019
…coded 1 pixel dots. (#2775)

This changeset implements several pieces of the puzzle that add up to a narrow ellipsis rendering.

## EllipsisCodePoint

`ImFontConfig` and `ImFont` received `ImWchar EllipsisCodePoint = -1;` field. User may configure `ImFontConfig::EllipsisCodePoint` a unicode codepoint that will be used for rendering narrow ellipsis. Not setting this field will automatically detect a suitable character or fall back to rendering 3 dots with minimal spacing between them. Autodetection prefers codepoint 0x2026 (narrow ellipsis) and falls back to 0x0085 (NEXT LINE) when missing. Wikipedia indicates that codepoint 0x0085 was used as ellipsis in some older windows fonts. So does default Dear ImGui font. When user is merging fonts - first configured and present ellipsis codepoint will be used, ellipsis characters from subsequently merged fonts will be ignored.

## Narrow ellipsis

Rendering a narrow ellipsis is surprisingly not straightforward task. There are cases when ellipsis is bigger than the last visible character therefore `RenderTextEllipsis()` has to hide last two characters. In a subset of those cases ellipsis is as big as last visible character + space before it. `RenderTextEllipsis()` tries to work around this case by taking free space between glyph edges into account. Code responsible for this functionality is within `if (text_end_ellipsis != text_end_full) { ... }`.

## Fallback (manually rendered dots)

There are cases when font does not have ellipsis character defined. In this case RenderTextEllipsis() falls back to rendering ellipsis as 3 dots, but with reduced spacing between them. 1 pixel space is used in all cases. This results in a somewhat wider ellipsis, but avoids issues where spaces between dots are uneven (visible in larger/monospace fonts) or squish dots way too much (visible in default font where dot is essentially a pixel). This fallback method obsoleted `RenderPixelEllipsis()` and this function was removed. Note that fallback ellipsis will always be somewhat wider than it could be, however it will fit in visually into every font used unlike what `RenderPixelEllipsis()` produced.
ocornut added a commit that referenced this pull request Sep 17, 2019
… we can claim the space between pos_max.x and ellipsis_max.x which gives us enough extra space to not requires the further (and otherwise valid) optimizations. Gets us vastly simplified code, yay. (#2775)
@ocornut
Copy link
Owner

ocornut commented Sep 17, 2019

Great work, thank you @rokups
I pushed in https://github.com/ocornut/imgui/tree/features/ellipsis_rendering
With:

  • 1 commit with various minor stylistic tweaks
  • 1 commit where by claiming the space between pos_max.x and ellipsis_max_x we're getting plenty more pixels back (generally FramePadding.x - 1) which renders the other complex bunch of space optimizations less important, so I felt we could remove them.

For reference here's the removed code

if (text_end_ellipsis != text_end_full)
{
    //   +---- First invisible character we arrived at.
    //  /  +-- Character that we hope to be first invisible.
    // [l][i]
    //  ||||
    //   \ \__ extra_spacing when two characters got hidden
    //    \___ extra_spacing when one character got hidden
    unsigned int c = 0;
    float extra_spacing = 0.0f;
    const char* text_end_ellipsis_prev = text_end_ellipsis;
    text_end_ellipsis += ImTextCharFromUtf8(&c, text_end_ellipsis, text_end_full);
    if (c && !ImCharIsBlankW(c))
    {
        // Free space after first invisible glyph
        const ImFontGlyph* hidden_glyph = font->FindGlyph((ImWchar)c);
        extra_spacing = hidden_glyph->AdvanceX - hidden_glyph->X1;
        text_end_ellipsis += ImTextCharFromUtf8(&c, text_end_ellipsis, text_end_full);
        if (c && !ImCharIsBlankW(c))
        {
            hidden_glyph = font->FindGlyph(text_end_ellipsis[1]);
            // Space before next invisible glyph. This intentionally ignores space from the first invisible 
            // glyph as that space will serve as spacing between ellipsis and last visible character. Without
            // doing this we may get into awkward situations where ellipsis pretty much sticks to the last 
            // visible character. This issue manifests with the default font for word "Brocolli" there both i 
            // and l are very thin. Unfortunately this makes fonts with wider gaps (like monospace) look a bit 
            // worse, but it is a fair middle ground.
            extra_spacing = hidden_glyph->X0;
        }
    }

    text_end_ellipsis = text_end_ellipsis_prev;
    if (extra_spacing > 0.0f)
    {
        // Repeat calculation hoping that we will get extra character visible
        // This is essentially an optimized version to avoid calculating width of the entire string again.
        text_avail_width += extra_spacing;
        text_size_clipped_x += font->CalcTextSizeA(font_size, text_avail_width - text_size_clipped_x, 0.0f, text_end_ellipsis, text_end_full, &text_end_ellipsis).x;
    }
}

Let me know if all sounds alright to you! Thanks again!

@ocornut
Copy link
Owner

ocornut commented Sep 17, 2019

Merged as per private feedback from @rokups , thanks again!

@ocornut ocornut closed this Sep 17, 2019
ocornut added a commit that referenced this pull request Sep 17, 2019
corentin-plouet added a commit to corentin-plouet/imgui that referenced this pull request Sep 22, 2019
Integrated power saving mode in Allegro example.

Fixed the cursor-blinking issue.

It is now working as expected, i.e. only setting a frame rate
requirement of 6fps when visibly blinking.

Also refactored a bit such that ImGui uses a boolean flag instead of
sharing the FrameRateRequirements object with user code.

Renamed FrameRateRequirements -> UserFrameRateRequirements.

Just so it's more explicit.

Minor formatting fixes [noci]

Implemented support for event waiting timeout in Win32.

Simplified the implementation.

This also addresses a design issue regarding how the application
requests a specific frame rate.

Get rid of the minimum frame rate.

Implemented logic to always render at least 3 frames.

Plus a bit of renaming/refactoring.

Implemented the 3-frame update logic for the SDL example.

Added support for 3-frame updates to Allegro example

+ refactoring of SDL/OpenGL3 example
+ refactoring and bug fix of Win32/DX11 example

Added suppor for 3-frame updates to Glfw example.

Rebased imstb_rectpack on stb_rect_pack v1.00.

SliderScalar: Improved assert when using U32 or U64 types with a large v_max value. (ocornut#2765)
+  misc minor stuff.

Demo: PlotLine example displays the average value. (ocornut#2759) + extra comments

Added a mechanism to compact/free the larger allocations of unused windows (buffers are compacted when a window is unused for 60 seconds, as per io.ConfigWindowsMemoryCompactTimer = 60.0f). Note that memory usage has never been reported as a problem, so this is merely a touch of overzealous luxury. (ocornut#2636)

Disable with ConfigWindowsMemoryCompactTimer < 0.0f (ocornut#2636)

TabBar: improved shrinking for large number of tabs to avoid leaving extraneous space on the right side. Individuals tabs are given integer-rounded width and remainder is spread between tabs left-to-right.

TabBar: feed desired width (sum of unclipped tabs width) into layout system to allow for auto-resize. (ocornut#2768)
Before 1.71 tab bars fed the sum of current width which created feedback loops in certain situations. Amend f95c77e.

DragInt, DragFloat, DragScalar: Using (v_min > v_max) allows locking any edit to the value.

ColorEdit: Disable Hue edit when Saturation==0 instead of letting Hue values jump around.

Fixed missing IMGUI_API for IsMouseDragPastThreshold().

Renamed SetMaxTimeBeforeNewFrame -> SetMaxWaitBeforeNextFrame

Compute the proper time to flip the cursor, instead of using 6fps.

Due to the 3-frame logic, this makes the effective cursor frame
rate go from 15fps to 5fps.

Refactored the event waiting implementation in SDL.

Moved the waiting part into the common implementation file.
This makes the platform+renderer binding simpler and not deviating
much from the existing one, which should make merging/integration
easier, especially for people maintaining their own copies.

Renamed variable to match the method name.

Refactored Win32 waiting code into common platform file

+ fix typo in SDL example

Fixed build

Avoid wasting frames by adding a small margin for the cursor.

Fixed regression

Win32 example: don't render 3 frames on timeouts

+ some refactoring

Refactored+fixed the Allegro5 implementation

Refactored+fixed Glfw example

Refactored+fixed SDL example

Refactoring (renaming)

Some final cleanup/refactoring; make the diff better

Refactored: no need to conditionally (not) poll after wait.

Keep waiting when the window is hidden (or minimized).

Implemented for Allegro, Glfw and SDL.
(does not seem to work with Allegro on Linux)

Implemented blocking when minimized/hidden for Win32

Minor formatting/doc changes.

Knocked off the 3 TODO items implemented by this PR.

Added missing Glfw callback (mouse pos)

This is just to record the event. The mouse pos is still handled as
before.

Small optimization: added shortcut test when feature disabled

This avoids paying the library/syscall cost when not needed.

Backends: OpenGL3: Tweaked initialization code allow application calling ImGui_ImplOpenGL3_CreateFontsTexture() before ImGui_ImplOpenGL3_NewFrame() if for some reason they wanted.

Fix DragScalar for unsigned types (ocornut#2780)
decreasing the value was broken on arm64

Nav, Scrolling: Added support for Home/End key. (ocornut#787)

Columns: Separator: Fixed a bug where non-visible separators within columns would alter the next row position differently than visible ones.
Fixed rounding issues also leading to change of ScrollMax depending on visible items (in particular negative coordinate would be rounded differently)

Fix signed types warning in pasteboard handler (ocornut#2786)

Examples: SDL/GLFW + OpenGL3: Fixes for Makefile (ocornut#2774)

- append CXXFLAGS instead of overwriting them
- add glad.c build rule

BeginTabItem: Fixed case where right-most tab would create an extraneous draw calls (probably related to other tab fitting code in 1.73 wip)

Remove trailing spaces (grep for ' \r?$' in visual studio)

Internal: Offset STB_TEXTURE_K_ defines to remove that change from ocornut#2541 + sponsors update.

Font: implement a way to draw narrow ellipsis without relying on hardcoded 1 pixel dots. (ocornut#2775)

This changeset implements several pieces of the puzzle that add up to a narrow ellipsis rendering.

`ImFontConfig` and `ImFont` received `ImWchar EllipsisCodePoint = -1;` field. User may configure `ImFontConfig::EllipsisCodePoint` a unicode codepoint that will be used for rendering narrow ellipsis. Not setting this field will automatically detect a suitable character or fall back to rendering 3 dots with minimal spacing between them. Autodetection prefers codepoint 0x2026 (narrow ellipsis) and falls back to 0x0085 (NEXT LINE) when missing. Wikipedia indicates that codepoint 0x0085 was used as ellipsis in some older windows fonts. So does default Dear ImGui font. When user is merging fonts - first configured and present ellipsis codepoint will be used, ellipsis characters from subsequently merged fonts will be ignored.

Rendering a narrow ellipsis is surprisingly not straightforward task. There are cases when ellipsis is bigger than the last visible character therefore `RenderTextEllipsis()` has to hide last two characters. In a subset of those cases ellipsis is as big as last visible character + space before it. `RenderTextEllipsis()` tries to work around this case by taking free space between glyph edges into account. Code responsible for this functionality is within `if (text_end_ellipsis != text_end_full) { ... }`.

There are cases when font does not have ellipsis character defined. In this case RenderTextEllipsis() falls back to rendering ellipsis as 3 dots, but with reduced spacing between them. 1 pixel space is used in all cases. This results in a somewhat wider ellipsis, but avoids issues where spaces between dots are uneven (visible in larger/monospace fonts) or squish dots way too much (visible in default font where dot is essentially a pixel). This fallback method obsoleted `RenderPixelEllipsis()` and this function was removed. Note that fallback ellipsis will always be somewhat wider than it could be, however it will fit in visually into every font used unlike what `RenderPixelEllipsis()` produced.

Font: Narrow ellipsis: various minor stylistic tweaks (ocornut#2775)

Font: Narrow ellipsis: once we know an ellipsis is going to be drawn, we can claim the space between pos_max.x and ellipsis_max.x which gives us enough extra space to not requires the further (and otherwise valid) optimizations. Gets us vastly simplified code, yay. (ocornut#2775)

Style: Allow style.WindowMenuButtonPosition to be set to ImGuiDir_None to hide the collapse button. (ocornut#2634, ocornut#2639)
+ Fix ocornut#2775

ImDrawListSplitter: fixed an issue merging channels if the last submitted draw command used a different texture. (ocornut#2506)

Fixed unused static function warning for some compilers. (ocornut#2793)

TreeNode: Added ImGuiTreeNodeFlags_SpanAvailWidth and ImGuiTreeNodeFlags_SpanFullWidth flags (ocornut#2451, ocornut#2438, ocornut#1897)
Added demo bits.

Warning fix.

ColorPicker / ColorEdit: restore Hue when zeroing Saturation. (ocornut#2722, ocornut#2770)
Issue is fixed by storing last active color picker color and last hue value when active color picker takes rgb as input. Then if current color picker color matches last active color - hue value will be restored. IDs are not used because ColorEdit4() and ColorWidget4() may call each other in hard-to-predict ways and they both push their own IDs on to the stack. We need hue restoration to happen in entire stack of these widgets if topmost widget used hue restoration. Since these widgets operate on exact same color value - color was chosen as a factor deciding which widgets should restore hue.

ColorPicker / ColorEdit: restore Hue when zeroing Saturation. (ocornut#2722, ocornut#2770) - changelog, fixed uninitialized variables, tweaks, renaming.

Fixed mouse event forwarding in macos example (ocornut#2710, ocornut#1961)

Readme, Wiki: Image loading examples.
@rokups rokups deleted the narrow-ellipsis branch October 8, 2019 11:42
ocornut added a commit that referenced this pull request Jan 11, 2023
…more data. (#2775, #4269)

Ideally we're bake a single glyph but it's currently difficult to setup in our font building process.
vanitas55 added a commit to vanitas55/imgui that referenced this pull request Jan 16, 2023
vanitas55 added a commit to vanitas55/imgui that referenced this pull request Jan 16, 2023
kjblanchard pushed a commit to kjblanchard/imgui that referenced this pull request May 5, 2023
kjblanchard pushed a commit to kjblanchard/imgui that referenced this pull request May 5, 2023
…more data. (ocornut#2775, ocornut#4269)

Ideally we're bake a single glyph but it's currently difficult to setup in our font building process.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants