Skip to content

Tables: Column clipping help #4152

@wesrobb

Description

@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

column_clipping

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();
}

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions