From e00ea4ccba1891970699f9b5b78ba1ebaada2974 Mon Sep 17 00:00:00 2001 From: hgn Date: Sun, 5 Dec 2021 19:00:19 +0000 Subject: [PATCH] added scroll bar ui --- fishladder.c | 46 +++++++++++------- vg/vg_console.h | 4 +- vg/vg_input.h | 2 +- vg/vg_ui.h | 123 ++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 151 insertions(+), 24 deletions(-) diff --git a/fishladder.c b/fishladder.c index 842bb64..7cda200 100644 --- a/fishladder.c +++ b/fishladder.c @@ -1266,7 +1266,7 @@ void vg_update(void) world.tile_y = floorf( world.tile_pos[1] ); // Tilemap editing - if( !world.simulating ) + if( !world.simulating && !gui_want_mouse() ) { v2_copy( vg_mouse_ws, drag_to_co ); @@ -2340,41 +2340,55 @@ void vg_ui(void) ui_global_ctx.cursor[1] = 0; ui_global_ctx.cursor[2] = 256; - ui_fill_y( &ui_global_ctx ); + gui_fill_y(); - ui_new_node( &ui_global_ctx ); + ui_global_ctx.id_base = 4 << 16; + + gui_new_node(); { - ui_fill_rect( &ui_global_ctx, ui_global_ctx.cursor, 0xff5577ff ); + gui_fill_rect( ui_global_ctx.cursor, 0xff5577ff ); - ui_text( &ui_global_ctx, "MARBLE COMPUTING", 4, 0 ); + gui_text( "MARBLE COMPUTING", 4, 0 ); ui_global_ctx.cursor[1] += 45; ui_global_ctx.cursor[3] = 709; // Level scroll view - ui_new_node( &ui_global_ctx ); + gui_new_node(); { - ui_fill_rect( &ui_global_ctx, ui_global_ctx.cursor, 0xffff7729 ); - ui_set_clip( &ui_global_ctx, ui_global_ctx.cursor ); + gui_fill_rect( ui_global_ctx.cursor, 0xffff7729 ); + gui_set_clip( ui_global_ctx.cursor ); + + ui_global_ctx.cursor[2] = 16; + gui_align_right(); + + static struct ui_scrollbar sb = { + .bar_height = 400 + }; + ui_scrollbar( &ui_global_ctx, &sb, 0 ); - ui_global_ctx.cursor[3] = 50; ui_global_ctx.cursor[2] = 240; + ui_global_ctx.cursor[3] = 50; + gui_align_left(); + + ui_px content_height = vg_list_size(cmp_levels_basic)*ui_global_ctx.cursor[3]; + ui_global_ctx.cursor[1] -= ui_calculate_content_scroll( &sb, content_height ); for( int i = 0; i < vg_list_size(cmp_levels_basic); i ++ ) { struct cmp_level *lvl_info = &cmp_levels_basic[i]; - ui_new_node( &ui_global_ctx ); + gui_new_node(); { - ui_fill_rect( &ui_global_ctx, ui_global_ctx.cursor, i&0x1?0xff23fce45:0xff8722f8 ); - ui_text( &ui_global_ctx, lvl_info->title, 3, 0 ); + gui_fill_rect( ui_global_ctx.cursor, i&0x1?0xff23fce45:0xff8722f8 ); + gui_text( lvl_info->title, 3, 0 ); } - ui_end_down( &ui_global_ctx ); + gui_end_down(); } - ui_release_clip( &ui_global_ctx ); + gui_release_clip(); } - ui_end_down( &ui_global_ctx ); + gui_end_down(); } - ui_end( &ui_global_ctx ); + gui_end(); } diff --git a/vg/vg_console.h b/vg/vg_console.h index febe54a..48f1f2e 100644 --- a/vg/vg_console.h +++ b/vg/vg_console.h @@ -102,8 +102,8 @@ static void vg_console_draw( void ) int start = VG_MIN( vg_console.cursor_pos, vg_console.cursor_user ), end = VG_MAX( vg_console.cursor_pos, vg_console.cursor_user ); - ui_global_ctx.cursor[0] = start * ui_glyph_spacing_x * vg_console.scale + 2; - ui_global_ctx.cursor[2] = (start == end? 0.2f: (float)(end-start)) * (float)ui_glyph_spacing_x * (float)vg_console.scale; + ui_global_ctx.cursor[0] = (start * ui_glyph_spacing_x * vg_console.scale)/2 + 2; + ui_global_ctx.cursor[2] = (start == end? 0.2f: (float)(end-start)) * (float)ui_glyph_spacing_x * (float)vg_console.scale * 0.5f; ui_fill_rect( &ui_global_ctx, ui_global_ctx.cursor, 0x66ffffff ); } diff --git a/vg/vg_input.h b/vg/vg_input.h index 6986542..6bae274 100644 --- a/vg/vg_input.h +++ b/vg/vg_input.h @@ -91,9 +91,9 @@ static inline int vg_get_button_up( const char *button ) static inline int vg_get_button_state( const char *button ) { - if( vg_get_button( button ) ) return 2; if( vg_get_button_down( button ) ) return 1; if( vg_get_button_up( button ) ) return 3; + if( vg_get_button( button ) ) return 2; return 0; } diff --git a/vg/vg_ui.h b/vg/vg_ui.h index a2cc770..35a3e3b 100644 --- a/vg/vg_ui.h +++ b/vg/vg_ui.h @@ -98,6 +98,35 @@ struct ui_ctx int click_state; // 0: released, 1: on down, 2: pressed, 3: on release }; +// Shortnames +#define gui_draw(...) ui_draw( &ui_global_ctx, __VA_ARGS__) +#define gui_current(...) ui_current( &ui_global_ctx, __VA_ARGS__) +#define gui_new_node() ui_new_node( &ui_global_ctx ) +#define gui_hasmouse(...) ui_hasmouse( &ui_global_ctx, __VA_ARGS__) +#define gui_end() ui_end( &ui_global_ctx ) +#define gui_end_down() ui_end_down( &ui_global_ctx ) +#define gui_end_right() ui_fill_right( &ui_global_ctx ) +#define gui_fill_y() ui_fill_y( &ui_global_ctx) +#define gui_fill_x() ui_fill_x( &ui_global_ctx) +#define gui_align_bottom() ui_align_bottom( &ui_global_ctx ) +#define gui_align_right() ui_align_right( &ui_global_ctx ) +#define gui_align_top() ui_align_top( &ui_global_ctx ) +#define gui_align_left() ui_align_left( &ui_global_ctx ) +#define gui_clamp_rect(...) ui_clamp_rect( &ui_global_ctx, __VA_ARGS__) +#define gui_group_id(...) ui_group_id( &ui_global_ctx, __VA_ARGS__) +#define gui_capture_mouse(...) ui_capture_mouse( &ui_global_ctx, __VA_ARGS__) +#define gui_set_clip(...) ui_set_clip( &ui_global_ctx, __VA_ARGS__) +#define gui_release_clip() ui_release_clip( &ui_global_ctx ) +#define gui_fill_rect_uv(...) ui_fill_rect_uv( &ui_global_ctx, __VA_ARGS__) +#define gui_fill_rect(...) ui_fill_rect( &ui_global_ctx, __VA_ARGS__) +#define gui_text(...) ui_text( &ui_global_ctx, __VA_ARGS__) +#define gui_begin(...) ui_begin( &ui_global_ctx, __VA_ARGS__) +#define gui_resolve(...) ui_resolve( &ui_global_ctx, __VA_ARGS__) +#define gui_set_mouse(...) ui_set_mouse( &ui_global_ctx, __VA_ARGS__) +#define gui_button(...) ui_button( &ui_global_ctx, __VA_ARGS__) +#define gui_window(...) ui_window( &ui_global_ctx, __VA_ARGS__) +#define gui_want_mouse() ui_want_mouse( &ui_global_ctx ) + // Globals // =========================================================================================================== @@ -420,6 +449,11 @@ static void ui_capture_mouse( ui_ctx *ctx, u32 id ) } } +static int ui_want_mouse( ui_ctx *ctx ) +{ + return ctx->capture_mouse_id == 0? 0: 1; +} + static void ui_set_clip( ui_ctx *ctx, ui_rect clip ) { ctx->clipping[0] = clip[0]; @@ -589,6 +623,9 @@ static void ui_begin( ui_ctx *ctx, ui_px res_x, ui_px res_y ) ctx->num_indices = 0; ui_release_clip( ctx ); + + if( ctx->click_state == 0 ) + ctx->capture_mouse_id = 0; } static void ui_resolve( ui_ctx *ctx ) @@ -625,6 +662,14 @@ struct ui_window ui_px drag_offset[2]; }; +enum button_state +{ + k_button_released = 0, + k_button_start_click, + k_button_click, + k_button_hold +}; + static int ui_button( ui_ctx *ctx, u32 id ) { ui_new_node( ctx ); @@ -634,19 +679,22 @@ static int ui_button( ui_ctx *ctx, u32 id ) if( ui_hasmouse(ctx) ) { ui_fill_rect( ctx, ctx->cursor, 0xffcccccc ); - + if( ctx->click_state == 1 ) - ctx->capture_lock = 1; - else if( ctx->capture_lock && ctx->click_state == 3 ) { - return 1; + ctx->capture_lock = 1; + return k_button_start_click; } + else if( ctx->capture_lock && ctx->click_state == 3 ) + return k_button_click; + else if( ctx->capture_lock && ctx->click_state == 2 ) + return k_button_hold; } else ui_fill_rect( ctx, ctx->cursor, 0xff999999 ); } - return 0; + return k_button_released; } static int ui_window( ui_ctx *ctx, struct ui_window *window, u32 control_group ) @@ -721,3 +769,68 @@ static int ui_window( ui_ctx *ctx, struct ui_window *window, u32 control_group ) return 1; } + +struct ui_scrollbar +{ + int drag; + ui_px drag_offset; + + ui_px py; + ui_px bar_height; + ui_px view_height; +}; + +static void ui_scrollbar( ui_ctx *ctx, struct ui_scrollbar *scrollbar, u32 id ) +{ + scrollbar->view_height = ctx->cursor[3]; + + if( scrollbar->drag ) + { + scrollbar->py = ctx->mouse[1]+scrollbar->drag_offset; + scrollbar->py = VG_MAX( scrollbar->py, 0 ); + scrollbar->py = VG_MIN( scrollbar->py, ctx->cursor[3] - scrollbar->bar_height ); + + if( ctx->click_state == 0 || ctx->click_state == 3 ) + scrollbar->drag = 0; + } + + ui_new_node( ctx ); + { + ui_fill_rect( ctx, ctx->cursor, 0xff000000 ); + ui_capture_mouse( ctx, __COUNTER__ ); + + ctx->cursor[1] += scrollbar->py; + ctx->cursor[3] = scrollbar->bar_height; + + ui_new_node( ctx ); + { + ui_capture_mouse( ctx, __COUNTER__ ); + struct ui_vert *drag_bar = ui_fill_rect( ctx, ctx->cursor, 0xff555555 ); + + if( ui_hasmouse( ctx ) || scrollbar->drag ) + { + drag_bar[0].colour = 0xff777777; + drag_bar[1].colour = 0xff777777; + drag_bar[2].colour = 0xff777777; + drag_bar[3].colour = 0xff777777; + + // start drag + if( ctx->click_state == 1 ) + { + scrollbar->drag = 1; + scrollbar->drag_offset = scrollbar->py - ctx->mouse[1]; + } + } + } + ui_end_down( ctx ); + } + ui_end( ctx ); +} + +static ui_px ui_calculate_content_scroll( struct ui_scrollbar *scrollbar, ui_px content ) +{ + float overlap = vg_maxf( 0.0f, (float)(content - scrollbar->view_height) ); + + float range = scrollbar->view_height - scrollbar->bar_height; + return ((float)scrollbar->py / range) * overlap; +} -- 2.25.1