Desplazamiento y cuadrícula

---

Las vistas desplazables y las cuadrículas facilitan la creación de inventarios, listas, menús y diseños de tarjetas. Esta guía muestra los patrones correctos para ambos, incluyendo el diseño, los IDs y las barras de desplazamiento.

Sigue los fundamentos de la UI: empieza por los rects de pantalla, usa cut para el diseño y usa siempre defer para pares push/pop.

Vistas desplazables

Usa vistas desplazables para contenido que pueda exceder el espacio disponible. La barra de desplazamiento debe estar fuera del área de contenido de la vista desplazable.

draw_scrollable_list :: proc(items: []string) {
    rect := UI.get_safe_screen_rect()->inset(50);

    // Reserva primero espacio para la barra de desplazamiento
    scroll_bar_area := rect->cut_right(8)->inset(2);

    settings: Scroll_View_Settings;
    settings.vertical = true;
    settings.horizontal = false;
    settings.clip_padding = {10, 10, 10, 10};

    sv := UI.push_scroll_view(rect, "my_scroll_view", settings); {
        defer UI.pop_scroll_view();

        content := sv.content_rect;
        ts := UI.default_text_settings();
        ts.size = 24;

        for i: 0..items.count-1 {
            item_rect := content->cut_top(40);
            UI.text(item_rect, ts, items[i]);
        }
    }

    scroll_bar_rect := sv->compute_scroll_bar_rect(scroll_bar_area);

    UI.quad(scroll_bar_area, core_globals.white_sprite, {0.025, 0.025, 0.025, 1});
    UI.quad(scroll_bar_rect, core_globals.white_sprite, {0.1, 0.1, 0.1, 1});
}

Importante: Si la barra de desplazamiento está dentro del contenido de la vista desplazable, romperá los límites y el comportamiento del desplazamiento. Siempre separa primero el área de la barra de desplazamiento.

Diseño de cuadrícula

Usa Grid_Layout para elementos del mismo tamaño, como ranuras de inventario o cuadrículas de iconos. Las cuadrículas comienzan en la esquina superior izquierda, avanzan hacia la derecha y luego saltan a la siguiente fila.

draw_inventory_grid :: proc(items: []Item) {
    rect := UI.get_safe_screen_rect()->inset(40);

    bs := UI.default_button_settings();
    ts := UI.default_text_settings();

    // 4 columnas x 6 filas basadas en el recuento de elementos, relleno de 8px
    grid := UI.make_grid_layout(rect, 4, 6, .ELEMENT_COUNT, 8);

    for i: 0..items.count-1 {
        UI.push_id("slot_%", {i});
        defer UI.pop_id();

        slot_rect := grid->next();
        if UI.button(slot_rect, bs, ts, items[i].name).clicked {
            select_item(i);
        }
    }
}

Si prefieres mosaicos de tamaño fijo, usa .ELEMENT_SIZE en lugar de .ELEMENT_COUNT:

grid := UI.make_grid_layout(rect, 100, 100, .ELEMENT_SIZE, 8);

El next() actualiza el estado de la cuadrícula:

slot_rect := grid->next();
grid.index; // 0, 1, 2, ...
grid.cur_x; // columna
grid.cur_y; // fila

Cuadrículas desplazables

Grid_Layout se expande automáticamente en vistas desplazables cuando se usa dentro de una. Este patrón es ideal para inventarios grandes:

draw_scrollable_grid :: proc(items: []Item) {
    rect := UI.get_safe_screen_rect()->inset(50);
    scroll_bar_area := rect->cut_right(8)->inset(2);

    settings: Scroll_View_Settings;
    settings.vertical = true;
    settings.horizontal = false;
    settings.clip_padding = {10, 10, 10, 10};

    sv := UI.push_scroll_view(rect, "inventory_scroll", settings); {
        defer UI.pop_scroll_view();

        grid := UI.make_grid_layout(sv.content_rect, 4, 6, .ELEMENT_COUNT, 8);
        bs := UI.default_button_settings();
        ts := UI.default_text_settings();

        for i: 0..items.count-1 {
            UI.push_id("slot_%", {i});
            defer UI.pop_id();

            slot_rect := grid->next();
            if UI.button(slot_rect, bs, ts, items[i].name).clicked {
                select_item(i);
            }
        }
    }

    scroll_bar_rect := sv->compute_scroll_bar_rect(scroll_bar_area);
    UI.quad(scroll_bar_area, core_globals.white_sprite, {0.025, 0.025, 0.025, 1});
    UI.quad(scroll_bar_rect, core_globals.white_sprite, {0.1, 0.1, 0.1, 1});
}

Mejores prácticas

• Usa UI.push_id() para elementos repetidos dentro de listas o cuadrículas.

• Recorta primero el área de la barra de desplazamiento antes de crear una vista desplazable.

• Empieza desde UI.get_safe_screen_rect() y deriva todo el diseño.

• Mantén al mínimo las interacciones solo al pasar el cursor (prioridad móvil).