From 157baab5b958e5a09a0e0a6493d8df9700378535 Mon Sep 17 00:00:00 2001 From: Krzosa Karol Date: Thu, 23 Jan 2025 09:25:41 +0100 Subject: [PATCH] refactor padding, required size. Working on colors --- build_file.c | 2 +- src/ui/ui.c | 51 +++++++++++++++++++++-------------- src/ui/ui.gen.c | 69 +++++++++++++++++++++++++++++++++--------------- src/ui/ui.gen.h | 21 ++++++++------- src/ui/ui.h | 7 +++++ src/ui/ui.meta.c | 32 ++++++++++++---------- todo.txt | 20 ++++++++++++-- 7 files changed, 134 insertions(+), 68 deletions(-) diff --git a/build_file.c b/build_file.c index 936b3b0..bd413c7 100644 --- a/build_file.c +++ b/build_file.c @@ -38,7 +38,7 @@ int main(int argc, char **argv) { b32 run_server = false; b32 core_test_target = true; b32 win32_target = true; - b32 wasm_target = true; + b32 wasm_target = false; if (run_server) { os_systemf("start /D ..\\package ..\\package\\run_server.bat"); diff --git a/src/ui/ui.c b/src/ui/ui.c index f594d92..2f72df3 100644 --- a/src/ui/ui.c +++ b/src/ui/ui.c @@ -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) { diff --git a/src/ui/ui.gen.c b/src/ui/ui.gen.c index a886f94..c38dea7 100644 --- a/src/ui/ui.gen.c +++ b/src/ui/ui.gen.c @@ -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(); } \ No newline at end of file diff --git a/src/ui/ui.gen.h b/src/ui/ui.gen.h index a8f5c39..3406721 100644 --- a/src/ui/ui.gen.h +++ b/src/ui/ui.gen.h @@ -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;\ diff --git a/src/ui/ui.h b/src/ui/ui.h index b069f7d..a361ab6 100644 --- a/src/ui/ui.h +++ b/src/ui/ui.h @@ -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, diff --git a/src/ui/ui.meta.c b/src/ui/ui.meta.c index 848f96d..8b55f71 100644 --- a/src/ui/ui.meta.c +++ b/src/ui/ui.meta.c @@ -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) { diff --git a/todo.txt b/todo.txt index f2425a8..104e46c 100644 --- a/todo.txt +++ b/todo.txt @@ -25,14 +25,30 @@ [ ] text input [ ] everything lister (with edits etc.) [ ] demo style, with different buttons and controls, headings - [ ] palette idea, also push pop palette + [x] palette idea, also push pop palette [ ] push pop flag - [ ] replace padding with something more 'real' + [x] replace padding with something more 'real' [ ] color picker [ ] slider [ ] draw image in box ui +- maybe remove radio_color in ui and do a 2 tier color scheme (ui as separate from the theme ui) + - but then how do we pass color to ui_radio_button? +float COLOR_Tint = 0.0; +Vec4 COLOR_Caret = HSLToRGB({COLOR_Tint, 0.4f, 0.60f, 1.0f}); +Vec4 COLOR_white = {1, 1, 1, 1}; +Vec4 COLOR_plot_lines = COLOR_white; +Vec4 COLOR_on_hover_rect = HSLToRGB({COLOR_Tint, 0.2f, 0.96f, 1.0f}); +Vec4 COLOR_cell_outline = COLOR_white; +Vec4 COLOR_background_plot = HSLToRGB({COLOR_Tint, 0.2f, 0.95f, 1.0f}); +Vec4 COLOR_spreadsheet_background = COLOR_background_plot; +Vec4 COLOR_text = HSLToRGB({COLOR_Tint, 0.2f, 0.7f, 1.0f}); +Vec4 COLOR_highlighted_text = HSLToRGB({COLOR_Tint, 0.4f, 0.9f, 1.0f}); +Vec4 COLOR_data_point = HSLToRGB({COLOR_Tint, 0.4f, 0.60f, 1.0f}); +Vec4 COLOR_highlighted_data_point = HSLToRGB({COLOR_Tint, 0.4f, 0.90f, 1.0f}); +Vec4 COLOR_on_hover_outline_rect = COLOR_text; + [ ] core [ ] ast [ ] move to core layer at some point as the abstract format for different types of serialization