Multiline text input horizontal scrolling

[unpacklo]

I was wondering if I was missing something obvious here for setting up a multiline text input with horizontal scrolling:

https://www.youtube.com/watch?v=Ncw78z9yTcA&feature=youtu.be

I know I can set the size manually in the code but that still doesn't help with the case where the text goes off the viewing area. It's rather laborious sometimes to edit some of these longer running lines.

We do have a workaround which is to make the overall window larger so the editing area becomes larger, but seeing as how we have some horizontal scrolling support, seems like that could be added to the multiline text?

[ocornut]

Yes we could, but measuring width is costly and we tend to avoid it this is why the multi-line text input still use single-line still scrolling.

• Automatic accurate frame to frame width detection would add a non-negligible performance penalty to InputTextMultiline(). OK if you are editing 50 lines, but if you are editing 2000 lines the difference would be problematic.
• We could otherwise come up with a scheme where you can specify width. And/or width only increasing based on what is visible (so you would only see the full extend of width by moving up/down).
• Ideally I'd like to rewrite InputText() to carry more state and be more optimal but that's probably not coming soon.

That code is quite complex for various reason so it's not a trivial change but I could look into the middle-ground solution sometimes.

[ocornut]

Untested idea but you could declare a larger child window for scrolling and create the widget inside it using all the width of it.

[unpacklo]

Hmm... is it not possible to calculate the max line width whenever text is input into the box rather than recomputing every frame?

Or is that what you were referring to in your rewrite that you don' t have time for? :)

[ocornut]

Yes that sort of thing. That would work but for very large text it would have an effect on interaction. However we could add it, I just don't have any enough time to do it all :)

[ocornut]

PS: First thing you can do is call PushItemWidth(-1.0f) to left-align and remove the label so that field.

[unpacklo]

Sorry for the late response, I just got back to doing a little bit of GUI work and came to revisit this.

I thought about your suggestion of creating a child window and I came up with the following code:

#define MAX(a, b)    (((a) < (b)) ? (b) : (a))
#define INTERNAL     static

struct MultilineScrollState
{
    // Input.
    float scrollRegionX;
    float scrollX;
    ImGuiStorage *storage;

    // Output.
    bool newScrollPositionAvailable;
    float newScrollX;
};

INTERNAL int MultilineScrollCallback(ImGuiTextEditCallbackData *data)
{
    MultilineScrollState *scrollState = (MultilineScrollState *)data->UserData;
    ImGuiID cursorId = ImGui::GetID("cursor");
    int oldCursorIndex = scrollState->storage->GetInt(cursorId, 0);

    if (oldCursorIndex != data->CursorPos)
    {
        int begin = data->CursorPos;

        while ((begin > 0) && (data->Buf[begin - 1] != '\n'))
        {
            --begin;
        }

        float cursorOffset = ImGui::CalcTextSize(data->Buf + begin, data->Buf + data->CursorPos).x;
        float SCROLL_INCREMENT = scrollState->scrollRegionX * 0.25f;

        if (cursorOffset < scrollState->scrollX)
        {
            scrollState->newScrollPositionAvailable = true;
            scrollState->newScrollX = MAX(0.0f, cursorOffset - SCROLL_INCREMENT);
        }
        else if ((cursorOffset - scrollState->scrollRegionX) >= scrollState->scrollX)
        {
            scrollState->newScrollPositionAvailable = true;
            scrollState->newScrollX = cursorOffset - scrollState->scrollRegionX + SCROLL_INCREMENT;
        }
    }

    scrollState->storage->SetInt(cursorId, data->CursorPos);

    return 0;
}

INTERNAL bool ImGuiInputTextMultiline(const char* label, char* buf, size_t buf_size, float height, ImGuiInputTextFlags flags = 0)
{
    float scrollbarSize = ImGui::GetStyle().ScrollbarSize;
    float labelWidth = ImGui::CalcTextSize(label).x + scrollbarSize;
    float SCROLL_WIDTH = 2000.0f; // Very large scrolling width to allow for very long lines.
    MultilineScrollState scrollState = {};

    // Set up child region for horizontal scrolling of the text box.
    ImGui::BeginChild(label, ImVec2(-labelWidth, height), false, ImGuiWindowFlags_HorizontalScrollbar);
    scrollState.scrollRegionX = MAX(0.0f, ImGui::GetWindowWidth() - scrollbarSize);
    scrollState.scrollX = ImGui::GetScrollX();
    scrollState.storage = ImGui::GetStateStorage();
    bool changed = ImGui::InputTextMultiline(label, buf, buf_size, ImVec2(SCROLL_WIDTH, MAX(0.0f, height - scrollbarSize)),
                                             flags | ImGuiInputTextFlags_CallbackAlways, MultilineScrollCallback, &scrollState);

    if (scrollState.newScrollPositionAvailable)
    {
        ImGui::SetScrollX(scrollState.newScrollX);
    }

    ImGui::EndChild();
    ImGui::SameLine();
    ImGui::Text(label);

    return changed;
}

It's a little bit of a hack (probably doing some bad things here) but seems to work for me. Problems are that the vertical scrollbar isn't really accessible and the horizontal scrollbar is sized according to a very large constant set ahead of time, but these are small issues for us compared to just having the horizontal scrolling available.

Here's what it looks like in action:

https://youtu.be/MTijYhbJG-w

-Dale Kim

[ocornut]

Reviving this topic because #1224 raised it. Thanks Dale and sorry I haven't reacted on your idea yet.

As posted in the other thread here is another temporary solution, which works and is simple but is more costly (calculate width every frame). If you only edit small buffers it'd be another good-enough workaround until the feature is implemented.

inputtext_multiline_calc_width.diff

diff --git a/imgui.cpp b/imgui.cpp
index e3c6f1a..baa116f 100644
--- a/imgui.cpp
+++ b/imgui.cpp
@@ -7704,7 +7704,7 @@ bool ImGui::InputTextEx(const char* label, char* buf, int buf_size, const ImVec2
     ImGuiWindow* draw_window = window;
     if (is_multiline)
     {
-        if (!BeginChildFrame(id, frame_bb.GetSize()))
+        if (!BeginChildFrame(id, frame_bb.GetSize(), ImGuiWindowFlags_HorizontalScrollbar))
         {
             EndChildFrame();
             EndGroup();
@@ -8133,7 +8133,7 @@ bool ImGui::InputTextEx(const char* label, char* buf, int buf_size, const ImVec2
 
             // Store text height (note that we haven't calculated text width at all, see GitHub issues #383, #1224)
             if (is_multiline)
-                text_size = ImVec2(size.x, line_count * g.FontSize);
+                text_size = InputTextCalcTextSizeW(edit_state.Text.Data, edit_state.Text.Data + edit_state.CurLenW);
         }
 
         // Scroll
@@ -8221,7 +8221,10 @@ bool ImGui::InputTextEx(const char* label, char* buf, int buf_size, const ImVec2
         // Render text only
         const char* buf_end = NULL;
         if (is_multiline)
-            text_size = ImVec2(size.x, InputTextCalcTextLenAndLineCount(buf_display, &buf_end) * g.FontSize); // We don't need width
+        {
+            buf_end = buf_display + strlen(buf_display);
+            text_size = g.Font->CalcTextSizeA(g.FontSize, FLT_MAX, 0.0f, buf_display, buf_end);
+        }
         draw_window->DrawList->AddText(g.Font, g.FontSize, render_pos, GetColorU32(ImGuiCol_Text), buf_display, buf_end, 0.0f, is_multiline ? NULL : &clip_rect);
     }

[andrewmcdonald-oxb]

Just a note to say I encountered this problem today, so I'll be happy to see the eventual rewrite to support this. I recognise it might be low on your priority list though.