Components / Planning

Kanban board

Columns of cards the user drags between stages.

Functions: cui_kanban_begin, cui_kanban_card_begin, cui_kanban_card_end, cui_kanban_column_begin, cui_kanban_column_end, cui_kanban_end

Usage

cui_kanban_begin(ui, "board");
for (int c = 0; c < column_count; c++) {
    if (cui_kanban_column_begin(ui, columns[c].name, columns[c].count, .dot = columns[c].color, .limit = columns[c].wip))
        add_card(c);                                     /* the "+" in the header */
    for (int k = 0; k < columns[c].count; k++) {
        card *cd = &columns[c].cards[k];
        if (cui_kanban_card_begin(ui, cd->id)) open_card(cd);
        cui_badge(ui, cd->tag, .tone = cd->tone, .size = CUI_SIZE_SM);
        cui_text(ui, cd->title, .font = CUI_FONT_MEDIUM);
        cui_kanban_card_end(ui);
    }
    cui_kanban_column_end(ui);
}
cui_kanban_move m;
if (cui_kanban_end(ui, &m)) move_card(m.card, m.from_column, m.to_column, m.to_index);

Cards lift and follow the pointer when dragged; the column under the pointer lights up and a line marks where the card will land. A plain click is a click, not a move. to_index is the position in the target column with the dragged card left out, so removing it first and then inserting at to_index is always right. The count turns red when a column goes over its limit. Wide boards scroll sideways. From the keyboard, Space lifts the focused card, the arrow keys move it between slots and columns, Enter drops it and Esc puts it back.

Keyboard

• From the keyboard, Space lifts the focused card, the arrow keys move it between slots and columns, Enter drops it and Esc puts it back.

Options of cui_kanban_column_begin

Option	Type	Default	Description
.dot	cui_color		a small dot of this color before the title; unset for none
.limit	int		work in progress limit: the count reads "3 / 5" and turns red above it; 0 for none
.width	float		Width in points; 0 uses the component's own.

cui_kanban_move

Field	Type	Description
card	int	the card_id of the card that was dropped
from_column	int	index of the column it came from, in the order the columns were begun
to_column	int	index of the column it was dropped in
to_index	int	its position in that column, counted with the dragged card left out

Related

• Week calendar: A week of timed events on a day grid, which can be moved and resized by dragging.
• Month calendar: A month grid with the events of each day, for schedules and planners.
• Gantt chart: A task list on the left and a timeline that scrolls sideways, with months, day numbers and shaded weekends.
• Node editor: A canvas of nodes joined by curved links, for shader graphs, audio patching or visual scripting.