Tables: Column clipping help

[wesrobb]

Dear ImGui 1.83 WIP (18209)
--------------------------------
sizeof(size_t): 4, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=199711
define: _WIN32
define: _MSC_VER=1928
define: _MSVC_LANG=201402
--------------------------------
io.BackendPlatformName: imgui_impl_win32
io.BackendRendererName: imgui_impl_dx12
io.ConfigFlags: 0x00000000
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x0000000E
 HasMouseCursors
 HasSetMousePos
 RendererHasVtxOffset
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64
io.DisplaySize: 1264.00,761.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

My Issue/Question:

I would like to be able to draw custom things using the DrawList API inside a table column while also using ListClipper. The column clipping does not seem to work the way I thought it would. I think I'm just using the wrong values in ImDrawList::PushClipRect for column clipping and need some guidance on the right way to do this.

Screenshots/Video

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

static ImGuiTableFlags flags = ImGuiTableFlags_ScrollY | ImGuiTableFlags_RowBg | ImGuiTableFlags_BordersOuter | ImGuiTableFlags_BordersV | ImGuiTableFlags_Resizable | ImGuiTableFlags_Reorderable | ImGuiTableFlags_Hideable;
if (ImGui::BeginTable("table_scrolly", 3, flags))
{
    ImGui::TableSetupScrollFreeze(0, 1); // Make top row always visible
    ImGui::TableSetupColumn("One", ImGuiTableColumnFlags_None);
    ImGui::TableSetupColumn("Two", ImGuiTableColumnFlags_None);
    ImGui::TableSetupColumn("Three", ImGuiTableColumnFlags_None);
    ImGui::TableHeadersRow();

    // Demonstrate using clipper for large vertical lists
    ImGuiListClipper clipper;
    clipper.Begin(20000);

    while (clipper.Step())
    {
        for (int row = clipper.DisplayStart; row < clipper.DisplayEnd; row++)
        {
            ImGui::TableNextRow();
            ImGui::TableNextColumn();

            // Custom drawing in first column
            {
                auto cursor = ImGui::GetCursorScreenPos();
                auto drawList = ImGui::GetWindowDrawList();

                auto table = ImGui::GetCurrentTable();
                auto column = &table->Columns[0];

                // This does not seem to do anything. How does column clipping work?
                drawList->PushClipRect(column->ClipRect.Min, column->ClipRect.Max, true);

                ImVec2 rectMin = cursor;
                ImVec2 rectMax(cursor.x + (20.0f + (row % 60)), cursor.y + ImGui::GetTextLineHeight());
                ImU32 color = ImGui::ColorConvertFloat4ToU32((ImVec4)ImColor::HSV((row % 7) / 7.0f, 1.0f, 1.0f));
                drawList->AddRectFilled(cursor, rectMax, color);

                drawList->PopClipRect();
            }

            for (int column = 1; column < 3; column++)
            {
                ImGui::TableNextColumn();
                ImGui::Text("Hello %d,%d", column, row);
            }
        }
    }
    ImGui::EndTable();
}

[ocornut]

Hello,

• Column draw command are merged based on the columns contents as known from ImGui:: API point of view. What the tables API does is that when it think the contents of a column didn't exceed the ClipRect, it can merge the DrawCmd with other columns.
• As use direct ImDrawList calls without any widget, you may need to call SetCursorScreenPos() twice to jump to the "edges" (specify the min and max range used) to ensure the column draw call doesn't get merged with another column. You can do that once for the column.
• Always use Metrics/Debugger to visualize the draw calls and you'll see how the draw calls gets merged.
• drawList->PushClipRect(column->ClipRect.Min, column->ClipRect.Max,, ...) will push the same ClipRect as already pushed in the column.... So it won't make a difference here and can be removed.

PS: We have a WIP branch reworking ImDrawList to store a bounding box in each ImDrawCmd, which will allow us to obtain the correct bounding box without the SetCursorScreenPos() call.

[wesrobb]

Hi Omar,

Thank you for the quick reply and helping me to resolve my issue. I had never looked at the Metrics/Debugger window before (facepalm), it is really useful!

For anyone else reading this. The Metrics/Debugger gives an great visualization of what was wrong here.

Before implementing @ocornut 's suggestion:

After adding SetCursorScreenPos

Fixed code listing

static ImGuiTableFlags flags = ImGuiTableFlags_ScrollY | ImGuiTableFlags_RowBg | ImGuiTableFlags_BordersOuter | ImGuiTableFlags_BordersV | ImGuiTableFlags_Resizable | ImGuiTableFlags_Reorderable | ImGuiTableFlags_Hideable;
if (ImGui::BeginTable("table_scrolly", 3, flags))
{
    ImGui::TableSetupScrollFreeze(0, 1); // Make top row always visible
    ImGui::TableSetupColumn("One", ImGuiTableColumnFlags_None);
    ImGui::TableSetupColumn("Two", ImGuiTableColumnFlags_None);
    ImGui::TableSetupColumn("Three", ImGuiTableColumnFlags_None);
    ImGui::TableHeadersRow();

    // Demonstrate using clipper for large vertical lists
    ImGuiListClipper clipper;
    clipper.Begin(20000);

    while (clipper.Step())
    {
        for (int row = clipper.DisplayStart; row < clipper.DisplayEnd; row++)
        {
            ImGui::TableNextRow();
            ImGui::TableNextColumn();

            // Custom drawing in first column
            {
                auto cursor = ImGui::GetCursorScreenPos();
                auto drawList = ImGui::GetWindowDrawList();

                ImVec2 rectMin = cursor;
                ImVec2 rectMax(cursor.x + (20.0f + (row % 60)), cursor.y + ImGui::GetTextLineHeight());
                ImU32 color = ImGui::ColorConvertFloat4ToU32((ImVec4)ImColor::HSV((row % 7) / 7.0f, 1.0f, 1.0f));

                ImGui::SetCursorScreenPos(rectMin);
                drawList->AddRectFilled(rectMin, rectMax, color);
                ImGui::SetCursorScreenPos(rectMax);
            }

            for (int column = 1; column < 3; column++)
            {
                ImGui::TableNextColumn();
                ImGui::Text("Hello %d,%d", column, row);
            }
        }
    }
    ImGui::EndTable();
}

[ocornut]

• As use direct ImDrawList calls without any widget, you may need to call SetCursorScreenPos() twice to jump to the "edges" (specify the min and max range used) to ensure the column draw call doesn't get merged with another column. You can do that once for the column.

Hi! This is Omar pretending to a be a bot!
The quoted message (posted 2021/05/18) suggested an incorrect usage pattern which we had to obsolete in 1.89. An item (even a Dummy()) needs to be submitted to extend parent window/cell boundaries. See #5548 for details.

[lailoken]

I'm not sure if anything changed, but I've found that a Dummy() alone no longer fixes/initializes column clipping. Neither did Text(" "). I had to do a Dummy({colWidth,0}) + SameLine() + TextUnformatted("_").

I had to draw actual text. A simple Text("a") would also work, but then I would have an 'a', so I pushed it outside the clipping with the dummy. (My column double-click resizing is a bit bigger, but I'm fine with that actually)

Is there a better way to do this?
I'm using 1.89.9 (docking)

[ocornut]

I would need a repro to understand what you are talking about and referring to as “fixes/initialize column”.

[lailoken]

I've been struggling to reproduce it in a simple sample, but finally was able to.

Background: My aim is to draw graphs in a table column (one in each row cell), and then to magnify/zoom at the mouse pos via a transform when ctrl is pressed). This all works. Then I gave the user two options: One where the graph is clipped by the table boundaries (and drawn over all other table content (I had to use nifty Channels here)), and the other where it stays in (clipped by) the column. This last one is where I had trouble (but am now able to solve using the correct Dummy call).

The trick was to use the + 1.f

void TestTableClip()
{
    ImGui::Begin("Test Clip");

    auto drawList = ImGui::GetWindowDrawList();

    ImGui::BeginTable("myTable", 2, ImGuiTableFlags_Borders | ImGuiTableFlags_Resizable);

    ImGui::TableSetupColumn("Column 1", ImGuiTableColumnFlags_WidthFixed, 100.0f);
    ImGui::TableSetupColumn("Column 2", ImGuiTableColumnFlags_WidthFixed, 100.0f);
    ImGui::TableNextRow();

    ImGui::TableNextColumn(); // Cell 1
    ImGui::Text("Cell 1");

    ImGui::TableNextColumn(); // Cell 2
    auto pos = ImGui::GetCursorScreenPos();

    // Need to do this to "activate" clipping - NOTE needs to extend beyond cell 2
    ImGui::Dummy({ImGui::GetContentRegionAvail().x + ImGui::GetStyle().CellPadding.x + 1.f, 0});

    // draw rect over cell 2 only (will clip because of dummy above)
    drawList->AddRectFilled(ImVec2(pos.x - 50, pos.y), ImVec2(pos.x + 100, pos.y + 10), IM_COL32(255, 0, 0, 255));
   
    ImGui::EndTable();

    ImGui::End();
}

Summary: Table column clipping for any other operation in the column is not used if a text/dummy item is not actually clipped in any row in that column. (It has to be larger than current column) - This is fine, but row double-click resizing will be affected (not a big deal)

[ocornut]

Your solution will always deactivate the draw command merging. It would be more optimal, simpler and more consistent if you submitted a dummy matching the maximum position of what you actually draw.

In your case it would be:

• draw rectangle
• set cursor screen pos to rectangle bottom right
• call Dummy(0,0)

The point is when we assume that no item have been submitted that will go further than columns limits, then we can make command draw calls.

[lailoken]

I've changed it your recommended order (using my repo above), and it still does not clip the rectangle to the column:

    ImGui::TableNextColumn();  // Cell 2
    auto pos = ImGui::GetCursorScreenPos();

    // 1. draw rect
    drawList->AddRectFilled(ImVec2(pos.x - 50, pos.y), ImVec2(pos.x + 100, pos.y + 10), IM_COL32(255, 0, 0, 255));

    // 2. set cursor screen pos to rect bottom right:
    float columnWidth = ImGui::GetColumnWidth() + ImGui::GetStyle().CellPadding.x;
    float rowHeight = ImGui::GetTextLineHeightWithSpacing() + ImGui::GetStyle().CellPadding.y;
    ImGui::SetCursorScreenPos(ImVec2{pos.x + columnWidth, pos.y + rowHeight});

    // 3. draw dummy
    ImGui::Dummy({0, 0});

However, if I change it to ImGui::Dummy({1.f, 0}) then it works again.
(I also don't need to do bottom right, I can also do top-right.)

PS: is my calculation correct/optimal for bottom-right?

[lailoken]

PS: When you are talking about "command merging", were you referring to ChannelsMerge()? (which is not what I'm struggling with here)

[ocornut]

You have misread my message. You should not have to use column width or row height. The only thing you need to use is to ensure the extent of shapes you submitted via ImDrawList are is declared in the layout system. The only position you should therefore use is the lower-right-most position used by those shapes. See my pseudo code above.

(which is not what I'm struggling with here)

It is exactly what you are struggling with. The effect of columns draw call being merged can be surprising if the assumption that contents didn’t stray off columns limit is incorrect.

[lailoken]

I did not mention that my cell is zoomed both in X and Y (like a magnifier) and can sometimes draw over other columns and rows.
Doing a set cursor pos to rectangle bottom is increasing my table row height (will set it to top right rather).

But otherwise, thank you for the explanation about table draw lists, and clipping.
I'll adapt this solution for my application.

[ocornut]

It's not possible to clip using row max y as a cliprect limit, otherwise that would make it easy to lead to 1 drawcmd per cell.

I am not sure what "my cell is zoomed both in X and Y (like a magnifier)" means other than your ImDrawList submitted geometry is scaled. You'd be better off manually clipping your ImDrawList submitted content (e.g. a rectfilled or image call) if you can.

[lailoken]

I'm doing my own manual scaling.
For context, my original table:

When "magnified"

This is working well with:

    ImGui::SetCursorScreenPos(ImVec2{originPos.x + graphColWidth + guiStyle.CellPadding.x + 0.01f, originPos.y});
    ImGui::Dummy({0, 0});

Currently the code above is something I call only for the first visible rendered row, for that graph column (else I could have called it on each row with the actual drawn rectangle min/max, but that has other problems, like double clicking on the column dividers has problematic best fit resizing), and is unneeded anyway as this works 100%.

If nothing is done, it will look like this: