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

new ui conception rect_cut+ryan memes

Browse Source
This commit is contained in:
Krzosa Karol
2025-01-17 10:59:35 +01:00
parent 3151a84ffe
commit 0ad84c9fc7
5 changed files with 378 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/wasm_app/ui.c
View File

@@ -66,8 +66,17 @@ fn void ui_push_box(ui_box_t *parent, ui_box_t *box) {
parent->node_count += 1;
}
fn void ui_push_top(ui_box_t *new_top) { ui->top = new_top; }
fn void ui_pop_top(void) { ui->top = ui->top->parent; }
fn r2f32_t ui_next_rect(ui_op_t layout_op, r2f32_t *rect, v2f32_t required_size) {
switch (layout_op) {
case ui_op_cut_top: return r2f32_cut_top_no_squash(rect, required_size.y); break;
case ui_op_cut_bottom: return r2f32_cut_bottom_no_squash(rect, required_size.y); break;
case ui_op_cut_left: return r2f32_cut_left_no_squash(rect, required_size.x); break;
case ui_op_cut_right: return r2f32_cut_right_no_squash(rect, required_size.x); break;
case ui_op_idle: break;
default_is_invalid;
}
return (r2f32_t){0};
}
fn ui_box_t *ui_build_box_from_id(ui_code_loc_t loc, ui_box_flags_t flags, ui_id_t id) {
ui_box_t *box = ui_find_box(id);
@@ -86,6 +95,8 @@ fn ui_box_t *ui_build_box_from_id(ui_code_loc_t loc, ui_box_flags_t flags, ui_id
box->id = id;
box->flags = flags;
ui_push_box(ui->top, box);
r2f32_t rect = ui_next_rect(ui->top->layout_op, &ui->top->rect, rn_measure_string(&rn_state.main_font, box->string));
ui_set_rect(box, rect);
return box;
}
@@ -96,12 +107,19 @@ fn ui_box_t *ui_build_box_from_string(ui_code_loc_t loc, ui_box_flags_t flags, s
return box;
}
#define ui_boxf(flags, ...) ui__boxf(UILOC, flags, __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);
ui_box_t *box = ui_build_box_from_string(loc, flags, string);
return box;
}
fn ui_signal_t ui_signal_from_box(ui_box_t *box) {
ui_signal_t result = {box};
app_event_t *ev = ui->event;
b32 move = ev->kind == app_event_kind_mouse_move;
b32 inside = r2f32_contains(box->rect, ev->mouse_pos);
b32 inside = r2f32_contains(box->final_rect, ev->mouse_pos);
if (ui_is_active_box(box)) {
result.dragging = true;
@@ -125,16 +143,39 @@ fn ui_signal_t ui_signal_from_box(ui_box_t *box) {
return result;
}
fn ui_signal_t ui_button(ui_code_loc_t loc, char *str, ...) {
#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_rect = true, .draw_text = true }, string);
{
box->full_rect = box->rect = r2f32_cut_top(&ui->top->rect, rn_state.main_font.size);
}
ui_signal_t signal = ui_signal_from_box(box);
return signal;
}
#define ui_label(...) ui__label(UILOC, __VA_ARGS__)
fn ui_box_t *ui__label(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);
return box;
}
#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);
if (box->created_new) box->expanded = true;
ui_signal_t signal = ui_signal_from_box(box);
if (signal.clicked) box->expanded = !box->expanded;
signal.clicked = box->expanded;
if ( box->expanded) box->string = s8_printf(tcx.temp, "* %S", box->string);
if (!box->expanded) box->string = s8_printf(tcx.temp, "> %S", box->string);
if (box->expanded) r2f32_cut_left(&ui->top->rect, ui_em(0.5f));
return signal;
}
fn void ui_end_expander(void) {
r2f32_add_left(&ui->top->rect, ui_em(0.5f));
}
fn void ui_begin_build(ui_code_loc_t loc, app_event_t *ev, r2f32_t window_rect) {
ui->event = ev;
@@ -167,10 +208,15 @@ fn void ui_end_build(void) {
}
}
fn r2f32_t window_rect_from_frame(app_frame_t *frame) {
r2f32_t window_rect = r2f32(0, 0, frame->window_size.x, frame->window_size.y);
return window_rect;
}
fn void ui_draw(app_frame_t *frame) {
for (ui_preorder_iter_t it = ui_iterate_preorder(&ui->root); ui_preorder_iter_is_valid(it); ui_iter_advance_preorder(&it)) {
ui_box_t *box = it.box;
r2f32_t clip_rect = box->rect;
box->final_rect = box->full_rect;
v4f32_t rect_color = primary_color_global;
v4f32_t text_color = black_color_global;
@@ -183,15 +229,20 @@ fn void ui_draw(app_frame_t *frame) {
text_color = accent1_color_global;
}
rn_set_clip(clip_rect);
if (box->flags.draw_rect) {
rn_draw_rect(box->rect, rect_color);
rn_draw_rect(box->full_rect, rect_color);
}
if (box->flags.draw_border) {
rn_draw_rect_border(box->rect, accent2_color_global);
rn_draw_rect_border(box->full_rect, accent2_color_global);
}
if (box->flags.draw_text) {
rn_draw_string(&rn_state.main_font, box->rect.min, text_color, box->string);
v2f32_t string_size = rn_measure_string(&rn_state.main_font, box->string);
v2f32_t rect_size = r2f32_get_size(box->full_rect);
v2f32_t rect_string_diff = v2f32_sub(rect_size, string_size);
v2f32_t center_pos = v2f32_divs(rect_string_diff, 2);
v2f32_t pos_in_rect = v2f32(box->full_rect.min.x, center_pos.y);
v2f32_t pos = v2f32_add(pos_in_rect, box->full_rect.min);
rn_draw_string(&rn_state.main_font, pos, text_color, box->string);
}
}
}
@@ -203,12 +254,75 @@ fn void ui_demo_init(ma_arena_t *arena) {
fn void ui_demo_update(app_frame_t *frame) {
for (app_event_t *ev = frame->first_event; ev; ev = ev->next) {
ui_begin_build(UILOC, ev, r2f32_mindim(v2f32(0.f, 0.f), frame->window_size));
ui_button(UILOC, "thing itself##id32");
ui_begin_build(UILOC, ev, window_rect_from_frame(frame));
ui->top->layout_op = ui_op_idle;
ui_box_t *scroller_box = ui_boxf((ui_box_flags_t){.draw_rect = true}, "scroller");
ui_set_rect(scroller_box, r2f32_cut_right(&ui->top->rect, ui_em(1)));
ui_box_t *item_box = ui_boxf((ui_box_flags_t){.draw_rect = true}, "item_box");
ui_set_rect(item_box, r2f32_cut_left(&ui->top->rect, ui_max));
static f32 scroller_value;
defer_block(ui_push_top(item_box), ui_pop_top()) {
defer_if (ui_begin_expander("app_event_t").clicked, ui_end_expander()) {
for (int i = 0; i < 10; i += 1) {
ui_label("kind: app_event_kind_t##a%d", i);
ui_label("ctrl: b8##ds%d", i);
ui_label("shift: b8##f%d", i);
defer_if (ui_begin_expander("pos: v3f32_t##gg%d", i).clicked, ui_end_expander()) {
ui_label("x: f64 = value##hgt%d", i);
ui_label("y: f64 = value##r%d", i);
ui_label("z: f64 = value##yr%d", i);
}
defer_if (ui_begin_expander("mouse_pos: v2f32_t##i2%d", i).clicked, ui_end_expander()) {
ui_label("x: f64 = value##i3%d", i);
ui_label("y: f64 = value##i4%d", i);
}
}
}
}
defer_block(ui_push_top(scroller_box), ui_pop_top()) {
f32 item_count = (f32)item_box->node_count;
f32 all_items_size = item_count * rn_state.main_font.size;
f32 item_box_size = r2f32_get_size(ui->top->full_rect).y;
f32 scroller_box_size = r2f32_get_size(scroller_box->full_rect).y;
f32 scroller_size = CLAMP(item_box_size / all_items_size, 0, 1.0f);
f32 scrollable_space = (1 - scroller_size);
f32 scroller_norm = scroller_value / (all_items_size);
f32 scroller_percent = scroller_norm * scrollable_space;
f32 scroller_second = scrollable_space - scroller_percent;
scroller_box->layout_op = ui_op_idle;
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_id_from_string(s8_lit("slider")));
ui_set_rect(box, r2f32_cut_top(&ui->top->rect, scroller_size * scroller_box_size));
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 = CLAMP(scroller_value, 0, all_items_size);
}
if (ev->kind == app_event_kind_mouse_wheel) {
scroller_value -= ev->mouse_wheel_delta.y;
scroller_value = CLAMP(scroller_value, 0, all_items_size);
}
for (ui_box_t *it = item_box->first; it; it = it->next) {
it->full_rect.min.y -= scroller_value;
it->full_rect.max.y -= scroller_value;
it->rect.min.y -= scroller_value;
it->rect.max.y -= scroller_value;
}
}
ui_end_build();
}
rn_begin();
rn_draw_stringf(&rn_state.main_font, v2f32(0, frame->window_size.y - rn_state.main_font.size), black_color_global, "boxes: %d", ui->allocated_boxes);
ui_draw(frame);
rn_end(frame->window_size, white_color_global);