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

refactor padding, required size. Working on colors

Browse Source
This commit is contained in:
Krzosa Karol
2025-01-23 09:25:41 +01:00
parent 057d6b6f50
commit 157baab5b9
7 changed files with 134 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/ui/ui.c
View File

@@ -92,6 +92,18 @@ fn void ui_push_box(ui_box_t *parent, ui_box_t *box) {
parent->node_count += 1;
}
fn ui_axis2_t ui_axis_from_lop(ui_lop_t op) {
switch (op) {
case ui_lop_cut_top: return ui_axis2_y; break;
case ui_lop_cut_bottom: return ui_axis2_y; break;
case ui_lop_cut_left: return ui_axis2_x; break;
case ui_lop_cut_right: return ui_axis2_x; break;
case ui_lop_idle: return ui_axis2_invalid; break;
default_is_invalid;
}
return ui_axis2_invalid;
}
fn r2f32_t ui_next_rect(ui_lop_t op, r2f32_t *rect, v2f32_t required_size) {
switch (op) {
case ui_lop_cut_top: return r2f32_cut_top_no_squash(rect, required_size.y); break;
@@ -127,9 +139,7 @@ fn ui_box_t *ui_build_box_from_id(ui_code_loc_t loc, ui_box_flags_t flags, ui_id
box->flags = flags;
box->text_align = ui_top_text_align();
box->border_thickness = ui_top_border_thickness();
box->background_color = ui_top_background_color();
box->text_color = ui_top_text_color();
box->border_color = ui_top_border_color();
ui_box_fill_with_colors(box);
ui_push_box(ui->top, box);
return box;
}
@@ -139,10 +149,13 @@ fn ui_box_t *ui_build_box_from_string(ui_code_loc_t loc, ui_box_flags_t flags, s
ui_box_t *box = ui_build_box_from_id(loc, flags, id);
box->string = ui_get_display_string(string);
v2f32_t string_size = rn_measure_string(rn_state.main_font, box->string);
// @todo: this is un0intuitive
if (ui->required_width_stack) string_size.x = ui->required_width_stack->value;
if (ui->required_height_stack) string_size.y = ui->required_height_stack->value;
if (ui->padding_stack) string_size = v2f32_add(string_size, ui->padding_stack->value);
ui_axis2_t axis = ui_axis_from_lop(ui_top_lop());
if (ui->required_size_stack && (axis == ui_axis2_x || axis == ui_axis2_y)) {
string_size.e[axis] = ui_top_required_size();
}
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);
return box;
@@ -205,7 +218,8 @@ fn ui_signal_t ui__radio_button(ui_code_loc_t loc, i32 *value, i32 value_clicked
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_signal_t signal = ui_signal_from_box(box);
if (signal.clicked) *value = value_clicked;
if (*value == value_clicked) box->background_color = ui_top_radio_color();
// @todo?
if (*value == value_clicked) box->background_color = ui_top_bg_active_color();
return signal;
}
@@ -294,18 +308,15 @@ fn void ui__draw_box(app_frame_t *frame, ui_box_t *box) {
v4f32_t border_color = box->border_color;
if (ui_is_active_box(box)) {
f32 active_t = f32_clamp01(f32_ease_out_n(box->active_t, 50.f));
// background_color = v4f32_lerp(background_color, v4f32(1,1,1,1), 1.0);
text_color = v4f32_lerp(text_color, v4f32(1,1,1,1), active_t);
f32 active_t = f32_ease_out_n(box->active_t, 50.f);
active_t = f32_clamp01(active_t);
background_color = v4f32_lerp(background_color, box->bg_active_color, 1.0);
text_color = v4f32_lerp(text_color, box->text_active_color, active_t);
} else if (ui_is_hot_box(box)) {
f32 hot_t = f32_ease_out_n(box->hot_t, 25.f);
v4f32_t hsla_rect = v4f32_rgba_to_hsla(background_color);
hsla_rect.s = f32_lerp(hsla_rect.s, 1.0f, hot_t);
background_color = v4f32_hsla_to_rgba(hsla_rect);
v4f32_t hsla_text = v4f32_rgba_to_hsla(text_color);
hsla_text = v4f32_lerp(hsla_text, v4f32(0.2f, 0.3f, 0.3f, 1.0f), hot_t);
text_color = v4f32_hsla_to_rgba(hsla_text);
f32 hot_t = f32_ease_out_n(box->hot_t, 3.f);
hot_t = f32_clamp01(hot_t);
background_color = v4f32_lerp(background_color, box->bg_hot_color, hot_t);
text_color = v4f32_lerp(background_color, box->text_hot_color, hot_t);
}
@@ -583,7 +594,7 @@ fn void ui_demo_update(app_frame_t *frame, mt_tweak_t *tweak_table, i32 tweak_co
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_padding(v2f32(ui_em(3), 0))
ui_set_padding(ui_em(3))
ui_set_text_align(ui_text_align_center)
ui_set_lop(ui_lop_cut_left)
ui_set_top(top_box) {

69
src/ui/ui.gen.c
View File

@@ -15,22 +15,26 @@ fn void ui_push_text_align(ui_text_align_t v) { ui_text_align_node_t *n = ma_pus
fn void ui_pop_text_align(void) { SLLS_POP(ui->text_align_stack); }
fn ui_text_align_t ui_top_text_align(void) { return ui->text_align_stack->value; }
#define ui_set_text_align(x) defer_block(ui_push_text_align(x), ui_pop_text_align())
fn void ui_push_required_width(f32 v) { ui_f32_node_t *n = ma_push_type(tcx.temp, ui_f32_node_t); n->value = v; SLLS_PUSH(ui->required_width_stack, n); }
fn void ui_pop_required_width(void) { SLLS_POP(ui->required_width_stack); }
fn f32 ui_top_required_width(void) { return ui->required_width_stack->value; }
#define ui_set_required_width(x) defer_block(ui_push_required_width(x), ui_pop_required_width())
fn void ui_push_required_height(f32 v) { ui_f32_node_t *n = ma_push_type(tcx.temp, ui_f32_node_t); n->value = v; SLLS_PUSH(ui->required_height_stack, n); }
fn void ui_pop_required_height(void) { SLLS_POP(ui->required_height_stack); }
fn f32 ui_top_required_height(void) { return ui->required_height_stack->value; }
#define ui_set_required_height(x) defer_block(ui_push_required_height(x), ui_pop_required_height())
fn void ui_push_padding(v2f32_t v) { ui_v2f32_node_t *n = ma_push_type(tcx.temp, ui_v2f32_node_t); n->value = v; SLLS_PUSH(ui->padding_stack, n); }
fn void ui_push_required_size(f32 v) { ui_f32_node_t *n = ma_push_type(tcx.temp, ui_f32_node_t); n->value = v; SLLS_PUSH(ui->required_size_stack, n); }
fn void ui_pop_required_size(void) { SLLS_POP(ui->required_size_stack); }
fn f32 ui_top_required_size(void) { return ui->required_size_stack->value; }
#define ui_set_required_size(x) defer_block(ui_push_required_size(x), ui_pop_required_size())
fn void ui_push_padding(f32 v) { ui_f32_node_t *n = ma_push_type(tcx.temp, ui_f32_node_t); n->value = v; SLLS_PUSH(ui->padding_stack, n); }
fn void ui_pop_padding(void) { SLLS_POP(ui->padding_stack); }
fn v2f32_t ui_top_padding(void) { return ui->padding_stack->value; }
fn f32 ui_top_padding(void) { return ui->padding_stack->value; }
#define ui_set_padding(x) defer_block(ui_push_padding(x), ui_pop_padding())
fn void ui_push_background_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->background_color_stack, n); }
fn void ui_pop_background_color(void) { SLLS_POP(ui->background_color_stack); }
fn v4f32_t ui_top_background_color(void) { return ui->background_color_stack->value; }
#define ui_set_background_color(x) defer_block(ui_push_background_color(x), ui_pop_background_color())
fn void ui_push_bg_hot_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->bg_hot_color_stack, n); }
fn void ui_pop_bg_hot_color(void) { SLLS_POP(ui->bg_hot_color_stack); }
fn v4f32_t ui_top_bg_hot_color(void) { return ui->bg_hot_color_stack->value; }
#define ui_set_bg_hot_color(x) defer_block(ui_push_bg_hot_color(x), ui_pop_bg_hot_color())
fn void ui_push_bg_active_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->bg_active_color_stack, n); }
fn void ui_pop_bg_active_color(void) { SLLS_POP(ui->bg_active_color_stack); }
fn v4f32_t ui_top_bg_active_color(void) { return ui->bg_active_color_stack->value; }
#define ui_set_bg_active_color(x) defer_block(ui_push_bg_active_color(x), ui_pop_bg_active_color())
fn void ui_push_border_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->border_color_stack, n); }
fn void ui_pop_border_color(void) { SLLS_POP(ui->border_color_stack); }
fn v4f32_t ui_top_border_color(void) { return ui->border_color_stack->value; }
@@ -39,33 +43,42 @@ fn void ui_push_text_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.te
fn void ui_pop_text_color(void) { SLLS_POP(ui->text_color_stack); }
fn v4f32_t ui_top_text_color(void) { return ui->text_color_stack->value; }
#define ui_set_text_color(x) defer_block(ui_push_text_color(x), ui_pop_text_color())
fn void ui_push_radio_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->radio_color_stack, n); }
fn void ui_pop_radio_color(void) { SLLS_POP(ui->radio_color_stack); }
fn v4f32_t ui_top_radio_color(void) { return ui->radio_color_stack->value; }
#define ui_set_radio_color(x) defer_block(ui_push_radio_color(x), ui_pop_radio_color())
fn void ui_push_text_hot_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->text_hot_color_stack, n); }
fn void ui_pop_text_hot_color(void) { SLLS_POP(ui->text_hot_color_stack); }
fn v4f32_t ui_top_text_hot_color(void) { return ui->text_hot_color_stack->value; }
#define ui_set_text_hot_color(x) defer_block(ui_push_text_hot_color(x), ui_pop_text_hot_color())
fn void ui_push_text_active_color(v4f32_t v) { ui_v4f32_node_t *n = ma_push_type(tcx.temp, ui_v4f32_node_t); n->value = v; SLLS_PUSH(ui->text_active_color_stack, n); }
fn void ui_pop_text_active_color(void) { SLLS_POP(ui->text_active_color_stack); }
fn v4f32_t ui_top_text_active_color(void) { return ui->text_active_color_stack->value; }
#define ui_set_text_active_color(x) defer_block(ui_push_text_active_color(x), ui_pop_text_active_color())
fn void ui_assert_stacks_are_null(void) {
assert(ui->id_stack == NULL);
assert(ui->lop_stack == NULL);
assert(ui->border_thickness_stack == NULL);
assert(ui->text_align_stack == NULL);
assert(ui->required_width_stack == NULL);
assert(ui->required_height_stack == NULL);
assert(ui->required_size_stack == NULL);
assert(ui->padding_stack == NULL);
assert(ui->background_color_stack == NULL);
assert(ui->bg_hot_color_stack == NULL);
assert(ui->bg_active_color_stack == NULL);
assert(ui->border_color_stack == NULL);
assert(ui->text_color_stack == NULL);
assert(ui->radio_color_stack == NULL);
assert(ui->text_hot_color_stack == NULL);
assert(ui->text_active_color_stack == NULL);
}
fn void ui_push_init_values(void) {
ui_push_id(ui_idf("root"));
ui_push_lop(ui_lop_cut_top);
ui_push_border_thickness(1.0f);
ui_push_text_align(ui_text_align_left);
ui_push_background_color(v4f32_rgba255(245, 238, 230, 255));
ui_push_border_color(v4f32_rgba255(230, 164, 180, 255));
ui_push_text_color(v4f32_rgba255(0, 0, 0, 255));
ui_push_radio_color(v4f32_rgba255(243, 215, 202, 255));
ui_push_background_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.95f, 1.0f}));
ui_push_bg_hot_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.5f, 0.95f, 1.0f}));
ui_push_bg_active_color(v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.95f, 1.0f}));
ui_push_border_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f}));
ui_push_text_color(v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f}));
ui_push_text_hot_color(v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.4f, 0.7f, 1.0f}));
ui_push_text_active_color(v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.7f, 1.0f}));
}
fn void ui_pop_init_values(void) {
ui_pop_id();
@@ -73,7 +86,19 @@ ui_pop_lop();
ui_pop_border_thickness();
ui_pop_text_align();
ui_pop_background_color();
ui_pop_bg_hot_color();
ui_pop_bg_active_color();
ui_pop_border_color();
ui_pop_text_color();
ui_pop_radio_color();
ui_pop_text_hot_color();
ui_pop_text_active_color();
}
fn void ui_box_fill_with_colors(ui_box_t *box) {
box->background_color = ui_top_background_color();
box->bg_hot_color = ui_top_bg_hot_color();
box->bg_active_color = ui_top_bg_active_color();
box->border_color = ui_top_border_color();
box->text_color = ui_top_text_color();
box->text_hot_color = ui_top_text_hot_color();
box->text_active_color = ui_top_text_active_color();
}

21
src/ui/ui.gen.h
View File

@@ -4,28 +4,31 @@ typedef struct ui_id_node_t ui_id_node_t; struct ui_id_node_t { ui_id_t value; u
typedef struct ui_lop_node_t ui_lop_node_t; struct ui_lop_node_t { ui_lop_t value; ui_lop_node_t *next; };
typedef struct ui_f32_node_t ui_f32_node_t; struct ui_f32_node_t { f32 value; ui_f32_node_t *next; };
typedef struct ui_text_align_node_t ui_text_align_node_t; struct ui_text_align_node_t { ui_text_align_t value; ui_text_align_node_t *next; };
typedef struct ui_v2f32_node_t ui_v2f32_node_t; struct ui_v2f32_node_t { v2f32_t value; ui_v2f32_node_t *next; };
typedef struct ui_v4f32_node_t ui_v4f32_node_t; struct ui_v4f32_node_t { v4f32_t value; ui_v4f32_node_t *next; };
#define UI_DECL_BOX_MEMBERS \
f32 border_thickness;\
ui_text_align_t text_align;\
f32 required_width;\
f32 required_height;\
v2f32_t padding;\
f32 required_size;\
f32 padding;\
v4f32_t background_color;\
v4f32_t bg_hot_color;\
v4f32_t bg_active_color;\
v4f32_t border_color;\
v4f32_t text_color;\
v4f32_t radio_color;\
v4f32_t text_hot_color;\
v4f32_t text_active_color;\
#define UI_DECL_STACKS \
ui_id_node_t *id_stack;\
ui_lop_node_t *lop_stack;\
ui_f32_node_t *border_thickness_stack;\
ui_text_align_node_t *text_align_stack;\
ui_f32_node_t *required_width_stack;\
ui_f32_node_t *required_height_stack;\
ui_v2f32_node_t *padding_stack;\
ui_f32_node_t *required_size_stack;\
ui_f32_node_t *padding_stack;\
ui_v4f32_node_t *background_color_stack;\
ui_v4f32_node_t *bg_hot_color_stack;\
ui_v4f32_node_t *bg_active_color_stack;\
ui_v4f32_node_t *border_color_stack;\
ui_v4f32_node_t *text_color_stack;\
ui_v4f32_node_t *radio_color_stack;\
ui_v4f32_node_t *text_hot_color_stack;\
ui_v4f32_node_t *text_active_color_stack;\

7
src/ui/ui.h
View File

@@ -24,6 +24,13 @@ typedef enum {
ui_text_align_center,
} ui_text_align_t;
typedef enum {
ui_axis2_invalid = -1,
ui_axis2_x,
ui_axis2_y,
ui_axis2_count,
} ui_axis2_t;
typedef enum {
ui_lop_cut_top,
ui_lop_cut_bottom,

32
src/ui/ui.meta.c
View File

@@ -3,13 +3,6 @@
// gb_read_only v4f32_t accent1_color_global = v4f32_rgba(243, 215, 202, 255);
// gb_read_only v4f32_t accent2_color_global = v4f32_rgba(230, 164, 180, 255);
/*
white color 0xE9F7F7 0xE9, 0xF7, 0xF7
blueish color 0xBCF7F3 0xBC, 0xF7, 0xF3
redish color 0xFB8D82 0xFB, 0x8D, 0x82
background 0x0A, 0x11, 0x17
*/
fn void mt_ui_stacks(ma_arena_t *arena, sb8_t *c, sb8_t *h) {
ast_t *table = mtt_parse(arena, __FILE__, S8_CODE(
@@ -19,13 +12,15 @@ fn void mt_ui_stacks(ma_arena_t *arena, sb8_t *c, sb8_t *h) {
{ ui_lop_t lop 1 ui_lop_cut_top }
{ f32 border_thickness 0 1.0f }
{ ui_text_align_t text_align 0 ui_text_align_left }
{ f32 required_width 0 x }
{ f32 required_height 0 x }
{ v2f32_t padding 0 x }
{ v4f32_t background_color 0 `v4f32_rgba255(245, 238, 230, 255)` }
{ v4f32_t border_color 0 `v4f32_rgba255(230, 164, 180, 255)` }
{ v4f32_t text_color 0 `v4f32_rgba255(0, 0, 0, 255)` }
{ v4f32_t radio_color 0 `v4f32_rgba255(243, 215, 202, 255)` }
{ f32 required_size 0 x }
{ f32 padding 0 x }
{ v4f32_t background_color 0 `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.95f, 1.0f})` }
{ v4f32_t bg_hot_color 0 `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.5f, 0.95f, 1.0f})` }
{ v4f32_t bg_active_color 0 `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.95f, 1.0f})` }
{ v4f32_t border_color 0 `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f})` }
{ v4f32_t text_color 0 `v4f32_hsla_to_rgba((v4f32_t){0.0f, 0.2f, 0.7f, 1.0f})` }
{ v4f32_t text_hot_color 0 `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.4f, 0.7f, 1.0f})` }
{ v4f32_t text_active_color 0 `v4f32_hsla_to_rgba((v4f32_t){0.1f, 0.5f, 0.7f, 1.0f})` }
));
///////////////////////////////
@@ -111,6 +106,15 @@ fn void mt_ui_stacks(ma_arena_t *arena, sb8_t *c, sb8_t *h) {
}
sb8_stmtf(c, "}");
sb8_stmtf(c, "fn void ui_box_fill_with_colors(ui_box_t *box) {");
for (ast_t *it = table->first; it; it = it->next) {
if (!s8_ends_with(mtts(it, "name"), s8_lit("_color"), false)) {
continue;
}
mt_stmtf(c, it, "box->@name = ui_top_@name();");
}
sb8_stmtf(c, "}");
}
fn void mt_ui(ma_arena_t *arena) {