Desplazamiento y Cuadrícula

---

Las vistas de desplazamiento 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 diseño, IDs y barras de desplazamiento.

Sigue los fundamentos de la interfaz: comienza desde los rectángulos de la pantalla, usa cut para el diseño y siempre usa defer para pares push/pop.

Vistas de desplazamiento

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

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

    // Reserva espacio para la barra de desplazamiento primero
    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 de desplazamiento, romperá los límites y el comportamiento de desplazamiento. Siempre recorta el área de la barra de desplazamiento primero.

Diseño de cuadrícula

Usa Grid_Layout para elementos de tamaño igual como ranuras de inventario o cuadrículas de iconos. Las cuadrículas comienzan en la esquina superior izquierda, avanzan hacia la derecha y luego pasan 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 la cantidad de elementos, 8px de relleno
    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() método 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 expanden automáticamente las vistas de desplazamiento cuando se usan 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 el área de la barra de desplazamiento antes de crear una vista de desplazamiento.

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

• Mantén las interacciones sólo por hover al mínimo (mobile-first).