krzosa/wasm_transcript_browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui, fix cutting bug, appearance animations, add f32_round

Browse Source
This commit is contained in:
Krzosa Karol
2025-01-25 14:16:41 +01:00
parent 39c9a9841e
commit 0a6654c15d
9 changed files with 368 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
src/ui/ui.c
View File

@@ -84,6 +84,10 @@ fn u64 ui_hash_from_stack(void) {
return result;
}
fn b32 ui_id_is_null(ui_id_t id) {
return id.value == 0;
}
fn ui_id_t ui_id(s8_t string) {
string = ui_get_hash_string(string);
u64 string_hash = hash_data(string);
@@ -193,14 +197,17 @@ fn ui_box_t *ui_build_box_from_string(ui_code_loc_t loc, ui_box_flags_t flags, s
if (ui->padding_stack && (axis == ui_axis2_x || axis == ui_axis2_y)) {
string_size.e[axis] += ui_top_padding();
}
r2f32_t rect = ui_next_rect(ui->lop_stack->value, &ui->top->rect, string_size);
ui_set_rect(box, rect);
if (box->flags.dont_compute_rect == false) {
r2f32_t rect = ui_next_rect(ui_top_lop(), &ui->top->rect, string_size);
ui_set_rect(box, rect, ui_top_lop());
}
return box;
}
#define ui_boxf(...) ui__boxf(UILOC, __VA_ARGS__)
fn ui_box_t *ui__boxf(ui_code_loc_t loc, ui_box_flags_t flags, char *str, ...) {
S8_FMT(tcx.temp, str, string);
flags.dont_compute_rect = true;
ui_box_t *box = ui_build_box_from_string(loc, flags, string);
return box;
}
@@ -221,6 +228,7 @@ fn ui_signal_t ui_signal_from_box(ui_box_t *box) {
if (ui_is_active_box(box)) {
result.dragging = true;
result.drag = ui->event->mouse_delta;
if (ev_left_up(ev)) {
if (ui_is_hot_box(box)) {
result.clicked = true;
@@ -230,7 +238,25 @@ fn ui_signal_t ui_signal_from_box(ui_box_t *box) {
}
} else if (ui_is_hot_box(box) && ev_left_down(ev)) {
ui->active = box->id;
ui->focus = box->id;
if (box->flags.keyboard_nav) {
ui->focus = box->id;
}
}
if (ui_is_focused_box(box)) {
if (ev->kind == app_event_kind_key_down && ev->key == app_key_left) {
result.drag.x -= 1;
result.dragging = true;
result.clicked = true;
} else if (ev->kind == app_event_kind_key_down && ev->key == app_key_right) {
result.drag.x += 1;
result.dragging = true;
result.clicked = true;
}
if (ev->kind == app_event_kind_key_down && ev->key == app_key_enter) {
result.clicked = true;
}
}
if (inside) {
@@ -243,7 +269,14 @@ fn ui_signal_t ui_signal_from_box(ui_box_t *box) {
}
fn void ui_text_input_draw(ui_box_t *box) {
r2f32_t rect = box->final_rect;
r2f32_t rect = box->full_rect;
f32 appear_t = f32_ease_out_n(f32_clamp01(box->appear_t*8), 10);
if (!ui_id_is_null(box->id)) {
v2f32_t size = v2f32_divs(r2f32_get_size(rect), 2);
r2f32_t smaller_rect = r2f32_shrink(rect, size);
rect = r2f32_lerp(smaller_rect, rect, appear_t);
}
v4f32_t background_color = box->background_color;
v4f32_t text_color = box->text_color;
@@ -266,7 +299,7 @@ fn void ui_text_input_draw(ui_box_t *box) {
rn_draw_rect(rect, background_color);
rn_draw_rect_border(rect, border_color, box->border_thickness);
ui_text_input_t *ti = &box->text_input;
ui_text_input_t *ti = box->text_input;
s8_t string = s8(ti->str, ti->len);
v2f32_t pos = ui_aligned_text_pos(box->text_align, rect, string);
rn_draw_string(rn_state.main_font, pos, text_color, string);
@@ -302,7 +335,7 @@ fn i32 ui_text_replace(ui_text_input_t *ti, r1i32_t range, s8_t string) {
assert(change_size >= 0);
}
u8 *begin_remove = ti->str + range.min;
u8 *begin_remove = (u8 *)ti->str + range.min;
u8 *end_remove = begin_remove + size_to_remove;
i32 remain_len = (i32)ti->len - (range.min + size_to_remove);
@@ -329,13 +362,11 @@ fn_test void ui_test_text_replace(void) {
assert(s8_are_equal(ti.string, s8_lit("qaer")));
}
fn ui_signal_t ui_text_input(ui_code_loc_t loc, char *buffer, i32 buffer_size) {
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_border = true, .draw_rect = true, .draw_text = true }, s8_lit("text_input"));
fn ui_signal_t ui_text_input(ui_code_loc_t loc, ui_text_input_t *ti) {
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_border = true, .draw_rect = true, .draw_text = true, .keyboard_nav = true }, s8_lit("text_input"));
box->text_input = ti;
box->custom_draw = ui_text_input_draw;
ui_text_input_t *ti = &box->text_input;
ti->str = buffer;
ti->cap = buffer_size;
ui_signal_t signal = ui_signal_from_box(box);
if (ui_is_focused_box(box)) {
app_event_t *ev = ui->event;
@@ -392,7 +423,7 @@ fn ui_signal_t ui_text_input(ui_code_loc_t loc, char *buffer, i32 buffer_size) {
#define ui_button(...) ui__button(UILOC, __VA_ARGS__)
fn ui_signal_t ui__button(ui_code_loc_t loc, char *str, ...) {
S8_FMT(tcx.temp, str, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_border = true, .draw_rect = true, .draw_text = true }, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_border = true, .draw_rect = true, .draw_text = true, .keyboard_nav = true }, string);
ui_signal_t signal = ui_signal_from_box(box);
return signal;
}
@@ -400,7 +431,7 @@ fn ui_signal_t ui__button(ui_code_loc_t loc, char *str, ...) {
#define ui_radio_button(...) ui__radio_button(UILOC, __VA_ARGS__)
fn ui_signal_t ui__radio_button(ui_code_loc_t loc, i32 *value, i32 value_clicked, char *str, ...) {
S8_FMT(tcx.temp, str, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_border = true, .draw_rect = true, .draw_text = true }, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_border = true, .draw_rect = true, .draw_text = true, .keyboard_nav = true }, string);
ui_signal_t signal = ui_signal_from_box(box);
if (signal.clicked) *value = value_clicked;
// @todo?
@@ -411,7 +442,7 @@ fn ui_signal_t ui__radio_button(ui_code_loc_t loc, i32 *value, i32 value_clicked
#define ui_label_button(...) ui__label_button(UILOC, __VA_ARGS__)
fn ui_signal_t ui__label_button(ui_code_loc_t loc, char *str, ...) {
S8_FMT(tcx.temp, str, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_text = true }, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_text = true, .keyboard_nav = true }, string);
ui_signal_t signal = ui_signal_from_box(box);
return signal;
}
@@ -427,7 +458,7 @@ fn ui_box_t *ui__label(ui_code_loc_t loc, char *str, ...) {
#define ui_begin_expander(...) ui__begin_expander(UILOC, __VA_ARGS__)
fn ui_signal_t ui__begin_expander(ui_code_loc_t loc, char *str, ...) {
S8_FMT(tcx.temp, str, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_text = true }, string);
ui_box_t *box = ui_build_box_from_string(loc, (ui_box_flags_t){ .draw_text = true, .keyboard_nav = true }, string);
if (box->created_new) box->expanded = true;
ui_signal_t signal = ui_signal_from_box(box);
if (signal.clicked) box->expanded = !box->expanded;
@@ -466,9 +497,83 @@ fn void ui_begin_build(ui_code_loc_t loc, app_event_t *ev, r2f32_t window_rect)
ui->root.loc = loc;
}
fn void ui_end_build(void) {
assert(ui->top == &ui->root);
fn ui_box_t *ui_get_prev_box(ui_box_t *box, b32 (*match)(ui_box_t *)) {
for (ui_box_t *it = box; it;) {
if (it->last) {
it = it->last;
if (match(it)) return it;
else continue;
}
if (it->prev) {
it = it->prev;
if (match(it)) return it;
else continue;
}
it = it->parent;
if (it) it = it->prev;
}
return box;
}
fn ui_box_t *ui_get_next_box(ui_box_t *box, b32 (*match)(ui_box_t *)) {
for (ui_box_t *it = box; it;) {
if (it->first) {
it = it->first;
if (match(it)) return it;
else continue;
}
if (it->next) {
it = it->next;
if (match(it)) return it;
else continue;
}
it = it->parent;
if (it) it = it->next;
}
return box;
}
fn b32 ui_match_axis(ui_box_t *box, ui_axis2_t axis) {
ui_axis2_t box_axis = ui_axis_from_lop(box->lop);
b32 result = box_axis == axis;
return result;
}
fn b32 ui_match_keynav(ui_box_t *box) {
b32 result = box->flags.keyboard_nav;
return result;
}
fn b32 ui_match_keynav_xaxis(ui_box_t *box) {
b32 result = box->flags.keyboard_nav && ui_match_axis(box, ui_axis2_x);
return result;
}
fn ui_box_t *ui_get_right_box(ui_box_t *box) { return ui_get_next_box(box, ui_match_keynav_xaxis); }
fn ui_box_t *ui_get_left_box(ui_box_t *box) { return ui_get_prev_box(box, ui_match_keynav_xaxis); }
fn void ui_end_build(void) {
{
app_event_t *ev = ui->event;
ui_box_t *focus_box = ui_find_box(ui->focus);
if (focus_box == NULL) {
ui->focus = ui_get_next_box(&ui->root, ui_match_keynav)->id;
}
if (ev->kind == app_event_kind_key_down && ev->key == app_key_up) {
ui->focus = ui_get_prev_box(focus_box, ui_match_keynav)->id;
} else if (ev->kind == app_event_kind_key_down && ev->key == app_key_down) {
ui->focus = ui_get_next_box(focus_box, ui_match_keynav)->id;
} else if (ev->kind == app_event_kind_key_down && ev->key == app_key_right) {
// ui->focus = ui_get_right_box(focus_box)->id;
} else if (ev->kind == app_event_kind_key_down && ev->key == app_key_left) {
// ui->focus = ui_get_left_box(focus_box)->id;
}
}
assert(ui->top == &ui->root);
ui_pop_init_values();
ui_assert_stacks_are_null();
@@ -497,7 +602,14 @@ fn v2f32_t ui_aligned_text_pos(ui_text_align_t text_align, r2f32_t rect, s8_t st
}
fn void ui_default_draw_box(ui_box_t *box) {
r2f32_t rect = box->final_rect;
r2f32_t rect = box->full_rect;
f32 appear_t = f32_ease_out_n(f32_clamp01(box->appear_t*8), 10);
if (!ui_id_is_null(box->id)) {
v2f32_t size = v2f32_divs(r2f32_get_size(rect), 2);
r2f32_t smaller_rect = r2f32_shrink(rect, size);
rect = r2f32_lerp(smaller_rect, rect, appear_t);
}
v4f32_t background_color = box->background_color;
v4f32_t text_color = box->text_color;
@@ -566,6 +678,7 @@ fn void ui_begin_frame(app_frame_t *frame) {
fn void ui_end_frame(void) {
for (ui_box_t *box = ui->hash_first, *next = NULL; box; box = next) {
next = box->hash_next;
box->appear_t += (f32)ui->frame->delta;
if (ui_is_hot_box(box)) {
box->hot_t += (f32)ui->frame->delta;
} else {
@@ -591,141 +704,145 @@ fn void ui_serial_subtype(void *p, type_t *type, s8_t name) {
switch(type->kind) {
case type_kind_i8: {
i8 *n = (i8 *)p;
if (ui_label_button("%S: %d##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (i8)delta;
ui_signal_t sig = ui_label_button("%S: %d##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (i8)sig.drag.x;
}
return;
} break;
case type_kind_i16: {
i16 *n = (i16 *)p;
if (ui_label_button("%S: %d##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (i16)delta;
ui_signal_t sig = ui_label_button("%S: %d##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (i16)sig.drag.x;
}
return;
} break;
case type_kind_i32: {
i32 *n = (i32 *)p;
if (ui_label_button("%S: %d##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (i32)delta;
ui_signal_t sig = ui_label_button("%S: %d##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (i32)sig.drag.x;
}
return;
} break;
case type_kind_i64: {
i64 *n = (i64 *)p;
if (ui_label_button("%S: %lld##slider%S", name, (long long)*n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (i64)delta;
ui_signal_t sig = ui_label_button("%S: %lld##slider%S", name, (long long)*n, name);
if (sig.dragging) {
n[0] += (i64)sig.drag.x;
}
return;
} break;
case type_kind_u8: {
u8 *n = (u8 *)p;
if (ui_label_button("%S: %u##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (u8)delta;
ui_signal_t sig = ui_label_button("%S: %u##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (u8)sig.drag.x;
}
return;
} break;
case type_kind_u16: {
u16 *n = (u16 *)p;
if (ui_label_button("%S: %u##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (u16)delta;
ui_signal_t sig = ui_label_button("%S: %u##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (u16)sig.drag.x;
}
return;
} break;
case type_kind_u32: {
u32 *n = (u32 *)p;
if (ui_label_button("%S: %u##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (u32)delta;
ui_signal_t sig = ui_label_button("%S: %u##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (u32)sig.drag.x;
}
return;
} break;
case type_kind_u64: {
u64 *n = (u64 *)p;
if (ui_label_button("%S: %llu##slider%S", name, (unsigned long long)*n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (u64)delta;
ui_signal_t sig = ui_label_button("%S: %llu##slider%S", name, (unsigned long long)*n, name);
if (sig.dragging) {
n[0] += (u64)sig.drag.x;
}
return;
} break;
case type_kind_b8: {
b8 *n = (b8 *)p;
if (ui_label_button("%S: %s", name, *n ? "true" : "false").clicked) {
ui_signal_t sig = ui_label_button("%S: %s##button%S", name, *n ? "true" : "false", name);
if (sig.clicked) {
*n = !*n;
}
return;
} break;
case type_kind_b16: {
b16 *n = (b16 *)p;
if (ui_label_button("%S: %s", name, *n ? "true" : "false").clicked) {
ui_signal_t sig = ui_label_button("%S: %s##button%S", name, *n ? "true" : "false");
if (sig.clicked) {
*n = !*n;
}
return;
} break;
case type_kind_b32: {
b32 *n = (b32 *)p;
if (ui_label_button("%S: %s", name, *n ? "true" : "false").clicked) {
ui_signal_t sig = ui_label_button("%S: %s##button%S", name, *n ? "true" : "false");
if (sig.clicked) {
*n = !*n;
}
return;
} break;
case type_kind_b64: {
b64 *n = (b64 *)p;
if (ui_label_button("%S: %s", name, *n ? "true" : "false").clicked) {
ui_signal_t sig = ui_label_button("%S: %s##button%S", name, *n ? "true" : "false");
if (sig.clicked) {
*n = !*n;
}
return;
} break;
case type_kind_f32: {
f32 *n = (f32 *)p;
if (ui_label_button("%S: %f##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += delta;
ui_signal_t sig = ui_label_button("%S: %f##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += sig.drag.x;
}
return;
} break;
case type_kind_f64: {
f64 *n = (f64 *)p;
if (ui_label_button("%S: %f##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += delta;
ui_signal_t sig = ui_label_button("%S: %f##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += sig.drag.x;
}
return;
} break;
case type_kind_isize: {
isize *n = (isize *)p;
if (ui_label_button("%S: %lld##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (isize)delta;
ui_signal_t sig = ui_label_button("%S: %lld##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (isize)sig.drag.x;
}
return;;
} break;
case type_kind_usize: {
usize *n = (usize *)p;
if (ui_label_button("%S: %llu##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (usize)delta;
ui_signal_t sig = ui_label_button("%S: %llu##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (usize)sig.drag.x;
}
return;;
} break;
case type_kind_int: {
int *n = (int *)p;
if (ui_label_button("%S: %d##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (int)delta;
ui_signal_t sig = ui_label_button("%S: %d##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (int)sig.drag.x;
}
return;;
} break;
case type_kind_char: {
char *n = (char *)p;
if (ui_label_button("%S: %c##slider%S", name, *n, name).dragging) {
f32 delta = ui->event->mouse_delta.x;
n[0] += (char)delta;
ui_signal_t sig = ui_label_button("%S: %c##slider%S", name, *n, name);
if (sig.dragging) {
n[0] += (char)sig.drag.x;
}
return;;
} break;
@@ -739,7 +856,8 @@ fn void ui_serial_subtype(void *p, type_t *type, s8_t name) {
if (type->kind == type_kind_enum) {
i64 value = ti_enum_read_value(p, type);
s8_t string_value = ti_enum_value_to_name(value, type);
if (ui_label_button("%S: %S = %S", name, type->name, string_value).clicked) {
ui_signal_t sig = ui_label_button("%S: %S = %S##button%S", name, type->name, string_value, name);
if (sig.clicked) {
i64 new_value = ti_enum_next_value(p, value, type);
ti_enum_write_value(p, new_value, type);
}
@@ -791,7 +909,7 @@ fn void ui_demo_update(app_frame_t *frame, mt_tweak_t *tweak_table, i32 tweak_co
ui_begin_build(UILOC, ev, window_rect_from_frame(frame));
ui_box_t *top_box = ui_box0((ui_box_flags_t){.draw_rect = true, .clip_rect = true});
ui_set_rect(top_box, r2f32_cut_top(&ui->top->rect, ui_em(1.5f)));
ui_set_rect(top_box, r2f32_cut_top(&ui->top->rect, ui_em(1.5f)), ui_lop_cut_top);
ui_set_padding(ui_em(3))
ui_set_text_align(ui_text_align_center)
@@ -805,18 +923,23 @@ fn void ui_demo_update(app_frame_t *frame, mt_tweak_t *tweak_table, i32 tweak_co
if (ui_g_panel == 1) {
ui_box_t *scroller_box = ui_box0((ui_box_flags_t){.draw_rect = true, .clip_rect = true});
ui_set_rect(scroller_box, r2f32_cut_right(&ui->top->rect, ui_em(0.5f)));
ui_box_t *scroller_box = ui_boxf((ui_box_flags_t){.draw_rect = true, .clip_rect = true}, "scrollbar");
ui_set_rect(scroller_box, r2f32_cut_right(&ui->top->rect, ui_em(0.5f)), ui_lop_cut_right);
ui_box_t *item_box = ui_box0((ui_box_flags_t){.draw_rect = true, .clip_rect = true});
ui_set_rect(item_box, r2f32_cut_left(&ui->top->rect, ui_max));
ui_box_t *item_box = ui_boxf((ui_box_flags_t){.draw_rect = true, .clip_rect = true}, "item_box");
ui_set_rect(item_box, r2f32_cut_left(&ui->top->rect, ui_max), ui_lop_cut_left);
item_box->rect = r2f32_shrinks(item_box->rect, ui_em(1));
ui_set_text_align(ui_text_align_left)
ui_set_top(item_box) {
static char buff[128];
ui_text_input(UILOC, buff, sizeof(buff));
locl char buff[128];
locl ui_text_input_t text_input;
if (text_input.str == NULL) {
text_input.str = buff;
text_input.cap = lengthof(buff);
}
ui_text_input(UILOC, &text_input);
for (i32 i = 0; i < tweak_count; i += 1) {
mt_tweak_t *tweak = tweak_table + i;
@@ -835,7 +958,7 @@ fn void ui_demo_update(app_frame_t *frame, mt_tweak_t *tweak_table, i32 tweak_co
if (signal.dragging) {
f32 size = tweak->max - tweak->min;
v2f32_t string_size = rn_measure_string(rn_state.main_font, signal.box->string);
f32 delta = (ui->event->mouse_delta.x / string_size.x) * size;
f32 delta = (signal.drag.x / string_size.x) * size;
*n = CLAMP(*n + delta, tweak->min, tweak->max);
}
} else_is_invalid;
@@ -858,10 +981,10 @@ fn void ui_demo_update(app_frame_t *frame, mt_tweak_t *tweak_table, i32 tweak_co
r2f32_cut_top(&ui->top->rect, scroller_percent * scroller_box_size);
ui_box_t *box = ui_build_box_from_id(UILOC, (ui_box_flags_t){.draw_border = true, .draw_rect = true}, ui_idf("slider"));
ui_set_rect(box, r2f32_cut_top(&ui->top->rect, scroller_size * scroller_box_size));
ui_set_rect(box, r2f32_cut_top(&ui->top->rect, scroller_size * scroller_box_size), ui_lop_cut_top);
ui_signal_t signal = ui_signal_from_box(box);
if (signal.dragging) {
scroller_value += (ev->mouse_delta.y / item_box_size * 2) * (all_items_size);
scroller_value += (signal.drag.y / item_box_size * 2) * (all_items_size);
scroller_value = CLAMP(scroller_value, 0, all_items_size);
}
if (ev->kind == app_event_kind_mouse_wheel) {