X-Git-Url: https://harrygodden.com/git/?a=blobdiff_plain;f=vg%2Fvg_ui.h;h=11728509ae0d9ac7fa03feae4fd5a83c39332cd3;hb=aad3ce335e5a67018359442ee1c3a849d675ea18;hp=9758d9840c4add9c0fd524b4b3a056730a0aa36a;hpb=1b1332c5be3ffc9a4f59d95d0f087d3a92e3b135;p=fishladder.git diff --git a/vg/vg_ui.h b/vg/vg_ui.h index 9758d98..1172850 100644 --- a/vg/vg_ui.h +++ b/vg/vg_ui.h @@ -1,25 +1,80 @@ // Copyright (C) 2021 Harry Godden (hgn) - All Rights Reserved -/* - Concurrent UI buffer system - Coordinate space: - - 0,0 --- +(res:x) - | - | - | -+(res:y) +SHADER_DEFINE( shader_ui, + + // VERTEX + "layout (location=0) in vec2 a_co;" // i16, i16, .. ? + "layout (location=1) in vec2 a_uv;" // i8, i8 + "layout (location=2) in vec4 a_colour;" // u32 + "layout (location=3) in vec4 a_clip;" // i16, i16, i16, i16 + "uniform mat3 uPv;" + "" + "out vec2 aTexCoords;" + "out vec4 aColour;" + "out vec2 aWsp;" + "out vec4 aClip;" + "" + "void main()" + "{" + "gl_Position = vec4( uPv * vec3( a_co, 1.0 ), 1.0 );" + "aTexCoords = a_uv * 0.0078125;" + "aColour = a_colour;" + + "aWsp = a_co;" + "aClip = a_clip;" + "}", -*/ + // FRAGMENT + "uniform sampler2D uTexGlyphs;" + "out vec4 FragColor;" + "" + "in vec2 aTexCoords;" + "in vec4 aColour;" + "" + "in vec2 aWsp;" + "in vec4 aClip;" + "" + "void main()" + "{" + "float clip_blend = step( aWsp.x, aClip.z ) * step( aWsp.y, aClip.w ) * step( aClip.x, aWsp.x ) * step( aClip.y, aWsp.y );" + + "vec4 glyph = texture( uTexGlyphs, aTexCoords );" + "FragColor = vec4( aColour.rgb * glyph.rgb, aColour.a*glyph.a*clip_blend );" + "}" + , + UNIFORMS({ "uPv", "uTexGlyphs" }) +) #define UI_AUTO_FILL 0 +//#define UI_DEBUG // Types -// ================================================================ +// =========================================================================================================== + typedef i16 ui_px; typedef u32 ui_colour; typedef ui_px ui_rect[4]; typedef struct ui_ctx ui_ctx; +typedef struct ui_colourset ui_colourset; + +struct ui_colourset +{ + union + { + struct + { + ui_colour main; + ui_colour hover; + ui_colour active; + }; + struct + { + ui_colour background; + ui_colour bar; + ui_colour bar_hover; + }; + }; +}; struct ui_ctx { @@ -34,19 +89,247 @@ struct ui_ctx } stack[ 32 ]; + #pragma pack(push,1) + struct ui_vert + { + ui_px co[2]; //32 4 + u8 uv[2]; //16 2 + u32 colour; //32 4 + ui_rect clip; //64 8 + } + *verts; + #pragma pack(pop) + + u32 override_colour; + + u32 num_verts; + u16 *indices; + u32 num_indices; + + ui_rect clipping; ui_rect cursor; u32 stack_count; u32 capture_mouse_id; int capture_lock; u32 id_base; + int glyph_base; // User input ui_px mouse[2]; int click_state; // 0: released, 1: on down, 2: pressed, 3: on release + + ui_colourset *colours_main; + ui_colourset *colours_current; + + GLuint vao; + GLuint vbo; + GLuint ebo; + + struct ui_image + { + ui_rect rc; + GLuint image; + } + images[16]; + int image_count; }; +// Globals +// =========================================================================================================== + +// Opengl +int ui_glyph_override = 0; +ui_px ui_glyph_spacing_x = 6; +GLuint ui_glyph_texture = 0; + +ui_colourset ui_default_colours = { + .main = 0xff00ff00, + .hover = 0xffff00ff, + .active = 0xffff0000 +}; +ui_ctx ui_global_ctx = { + .padding = 8, + .colours_main = &ui_default_colours +}; + + +// Initialization +// =========================================================================================================== + +static void ui_reset_colours( ui_ctx *ctx ); +static void ui_init_context( ui_ctx *ctx, int index_buffer_size ) +{ + ui_reset_colours( ctx ); + + u32 vertex_buffer_size = (index_buffer_size+(index_buffer_size/2)); + + // Generate the buffer we are gonna be drawing to + { + glGenVertexArrays(1, &ctx->vao); + glGenBuffers( 1, &ctx->vbo ); + glGenBuffers( 1, &ctx->ebo ); + glBindVertexArray( ctx->vao ); + + glBindBuffer( GL_ARRAY_BUFFER, ctx->vbo ); + + glBufferData( GL_ARRAY_BUFFER, vertex_buffer_size * sizeof( struct ui_vert ), NULL, GL_DYNAMIC_DRAW ); + glBindVertexArray( ctx->vao ); + + glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, ctx->ebo ); + glBufferData( GL_ELEMENT_ARRAY_BUFFER, index_buffer_size * sizeof( u16 ), NULL, GL_DYNAMIC_DRAW ); + + u32 const stride = sizeof( struct ui_vert ); + + // XY + glVertexAttribPointer( 0, 2, GL_SHORT, GL_FALSE, stride, (void *)offsetof( struct ui_vert, co ) ); + glEnableVertexAttribArray( 0 ); + + // UV + glVertexAttribPointer( 1, 2, GL_UNSIGNED_BYTE, GL_FALSE, stride, (void *)offsetof( struct ui_vert, uv ) ); + glEnableVertexAttribArray( 1 ); + + // COLOUR + glVertexAttribPointer( 2, 4, GL_UNSIGNED_BYTE, GL_TRUE, stride, (void *)offsetof( struct ui_vert, colour ) ); + glEnableVertexAttribArray( 2 ); + + // CLIPPING + glVertexAttribPointer( 3, 4, GL_SHORT, GL_FALSE, stride, (void *)offsetof( struct ui_vert, clip ) ); + glEnableVertexAttribArray( 3 ); + } + + // Initialize default context + { + ctx->verts = (struct ui_vert *)malloc( vertex_buffer_size * sizeof(struct ui_vert) ); + ctx->indices = (u16*)malloc( index_buffer_size * sizeof(u16) ); + } +} + +static void ui_context_free( ui_ctx *ctx ) +{ + glDeleteVertexArrays( 1, &ctx->vao ); + glDeleteBuffers( 1, &ctx->vbo ); + glDeleteBuffers( 1, &ctx->ebo ); + + free( ctx->verts ); + free( ctx->indices ); +} + +static void ui_override_font( GLuint new_tex, ui_px space_x ) +{ + if( ui_glyph_texture ) + glDeleteTextures( 1, &ui_glyph_texture ); + + ui_glyph_texture = new_tex; + ui_glyph_override = 1; + ui_glyph_spacing_x = space_x; +} + +static void ui_default_init(void) +{ + // Load default font + if( !ui_glyph_override ) + { + u32 compressed[] = { + #include "fonts/weiholmir.h" + }; + + u32 pixels = 0, total = 72*72, data = 0; + u8 *image = malloc( total ); + + while( pixels < total ) + { + for( int b = 31; b >= 0; b-- ) + { + image[ pixels ++ ] = (compressed[data] & (0x1 << b))? 0xff: 0x00; + + if( pixels >= total ) + { + total = 0; + break; + } + } + data++; + } + + glGenTextures( 1, &ui_glyph_texture ); + glBindTexture( GL_TEXTURE_2D, ui_glyph_texture ); + + glTexImage2D( GL_TEXTURE_2D, 0, GL_R8, 72, 72, 0, GL_RED, GL_UNSIGNED_BYTE, image ); + + vg_tex2d_clamp(); + vg_tex2d_nearest(); + + free( image ); + } + + // Setup OpenGL memory + SHADER_INIT( shader_ui ); + ui_init_context( &ui_global_ctx, 20000 ); +} + +static void ui_default_free(void) +{ + if( !ui_glyph_override ) + glDeleteTextures( 1, &ui_glyph_texture ); + + ui_context_free( &ui_global_ctx ); +} + +static struct ui_vert *ui_fill_rect_uv( ui_ctx *ctx, ui_rect rect, u32 colour, ui_px uv[4] ); +static void ui_draw( ui_ctx *ctx, m3x3f view_override ) +{ + u32 num_indices_normal = ctx->num_indices; + + // Append images to back of buffer + for( int i = 0; i < ctx->image_count; i ++ ) + ui_fill_rect_uv( ctx, ctx->images[i].rc, 0xffffffff, (ui_px[4]){0,0,128,128} ); + + glBindVertexArray( ctx->vao ); + + glBindBuffer( GL_ARRAY_BUFFER, ctx->vbo ); + glBufferSubData( GL_ARRAY_BUFFER, 0, ctx->num_verts * sizeof( struct ui_vert ), ctx->verts ); + + glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, ctx->ebo ); + glBufferSubData( GL_ELEMENT_ARRAY_BUFFER, 0, ctx->num_indices * sizeof( u16 ), ctx->indices ); + + glEnable(GL_BLEND); + glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); + glBlendEquation(GL_FUNC_ADD); + + SHADER_USE( shader_ui ); + + m3x3f view = M3X3_IDENTITY; + + if( !view_override ) + { + view_override = view; + + m3x3_translate( view, (v3f){ -1.0f, 1.0f, 0.0f } ); + m3x3_scale( view, (v3f){ 1.0f/((float)vg_window_x*0.5f), -1.0f/((float)vg_window_y*0.5f), 1.0f } ); + } + + glUniformMatrix3fv( SHADER_UNIFORM( shader_ui, "uPv" ), 1, GL_FALSE, (float *)view_override ); + + glActiveTexture( GL_TEXTURE0 ); + glBindTexture( GL_TEXTURE_2D, ui_glyph_texture ); + glUniform1i( SHADER_UNIFORM( shader_ui, "uTexGlyphs" ), 0 ); + + glDrawElements( GL_TRIANGLES, num_indices_normal, GL_UNSIGNED_SHORT, (void*)(0) ); + + // Draw image elements + for( int i = 0; i < ctx->image_count; i ++ ) + { + struct ui_image *img = &ctx->images[i]; + + glBindTexture( GL_TEXTURE_2D, img->image ); + glDrawElements( GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (void*)( (num_indices_normal + 6*i)*sizeof(u16) ) ); + } + + glDisable(GL_BLEND); +} + // Rect controls -// ========================================================== +// =========================================================================================================== static void ui_rect_copy( ui_rect src, ui_rect dst ) { @@ -56,7 +339,7 @@ static void ui_rect_copy( ui_rect src, ui_rect dst ) dst[3] = src[3]; } -static void ui_rect_pad( ui_ctx *ctx, ui_rect rect, ui_px pad ) +static void ui_rect_pad( ui_rect rect, ui_px pad ) { rect[0] += pad; rect[1] += pad; @@ -66,6 +349,7 @@ static void ui_rect_pad( ui_ctx *ctx, ui_rect rect, ui_px pad ) static void ui_vis_rect( ui_rect rect, u32 colour ) { + #ifdef UI_DEBUG v2f p0; v2f p1; @@ -78,6 +362,15 @@ static void ui_vis_rect( ui_rect rect, u32 colour ) vg_line( (v2f){p1[0],p0[1]}, p1, colour ); vg_line( p1, (v2f){p0[0],p1[1]}, colour ); vg_line( (v2f){p0[0],p1[1]}, p0, colour ); + #endif +} + +// Stack control +// =========================================================================================================== + +static struct ui_qnode *ui_current( ui_ctx *ctx ) +{ + return &ctx->stack[ ctx->stack_count-1 ]; } static void ui_new_node( ui_ctx *ctx ) @@ -91,8 +384,8 @@ static void ui_new_node( ui_ctx *ctx ) if( parent->mouse_over ) { - if( ctx->mouse[0] >= node->rect[0] && ctx->mouse[0] <= node->rect[0]+node->rect[2] && - ctx->mouse[1] >= node->rect[1] && ctx->mouse[1] <= node->rect[1]+node->rect[3] ) + if( ctx->mouse[0] >= node->rect[0] && ctx->mouse[0] < node->rect[0]+node->rect[2] && + ctx->mouse[1] >= node->rect[1] && ctx->mouse[1] < node->rect[1]+node->rect[3] ) node->mouse_over = 1; else node->mouse_over = 0; @@ -105,7 +398,7 @@ static void ui_new_node( ui_ctx *ctx ) static int ui_hasmouse( ui_ctx *ctx ) { - struct ui_qnode *node = &ctx->stack[ ctx->stack_count-1 ]; + struct ui_qnode *node = ui_current( ctx ); return (node->mouse_over && (node->capture_id == ctx->capture_mouse_id)); } @@ -114,29 +407,59 @@ static void ui_end( ui_ctx *ctx ) struct ui_qnode *node = &ctx->stack[ --ctx->stack_count ]; ui_rect_copy( node->rect, ctx->cursor ); - ui_vis_rect( ctx->cursor, (node->mouse_over && (node->capture_id == ctx->capture_mouse_id))? 0xffff0000: 0xff0000ff ); + ui_vis_rect( ctx->cursor, + (node->mouse_over && (node->capture_id == ctx->capture_mouse_id))? 0xffff0000: 0xff0000ff ); } static void ui_end_down( ui_ctx *ctx ) { - ui_px height = ctx->stack[ ctx->stack_count ].rect[3]; + ui_px height = ui_current( ctx )->rect[3]; ui_end( ctx ); ctx->cursor[1] += height; } static void ui_end_right( ui_ctx *ctx ) { - ui_px width = ctx->stack[ ctx->stack_count ].rect[2]; + ui_px width = ui_current( ctx )->rect[2]; ui_end( ctx ); ctx->cursor[0] += width; } +static void ui_fill_y( ui_ctx *ctx ) +{ + struct ui_qnode *node = ui_current( ctx ); + ctx->cursor[3] = node->rect[3] - (ctx->cursor[1]-node->rect[1]); +} + +static void ui_fill_x( ui_ctx *ctx ) +{ + struct ui_qnode *node = ui_current( ctx ); + ctx->cursor[2] = node->rect[2] - (ctx->cursor[0]-node->rect[0]); +} + +// Alignment: | [] | -> | []| +static void ui_align_bottom( ui_ctx *ctx ) +{ + struct ui_qnode *node = ui_current( ctx ); + ctx->cursor[1] = node->rect[1] + node->rect[3] - ctx->cursor[3]; +} + static void ui_align_right( ui_ctx *ctx ) { - struct ui_qnode *node = &ctx->stack[ ctx->stack_count-1 ]; + struct ui_qnode *node = ui_current( ctx ); ctx->cursor[0] = node->rect[0] + node->rect[2] - ctx->cursor[2]; } +static void ui_align_top( ui_ctx *ctx ) +{ + ctx->cursor[1] = ui_current( ctx )->rect[1]; +} + +static void ui_align_left( ui_ctx *ctx ) +{ + ctx->cursor[0] = ui_current( ctx )->rect[0]; +} + static void ui_clamp_rect( ui_rect parent, ui_rect dest ) { dest[0] = vg_min( parent[0] + parent[2] - dest[2], dest[0] ); @@ -163,6 +486,198 @@ 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]; + ctx->clipping[1] = clip[1]; + ctx->clipping[2] = clip[0] + clip[2]; + ctx->clipping[3] = clip[1] + clip[3]; +} + +static void ui_release_clip( ui_ctx *ctx ) +{ + ctx->clipping[0] = -32000; + ctx->clipping[1] = -32000; + ctx->clipping[2] = 32000; + ctx->clipping[3] = 32000; +} + +// Drawing +// =========================================================================================================== + +static struct ui_vert *ui_fill_rect_uv( ui_ctx *ctx, ui_rect rect, u32 colour, ui_px uv[4] ) +{ + struct ui_vert *vertices = &ctx->verts[ ctx->num_verts ]; + vertices[0].co[0] = rect[0]; + vertices[0].co[1] = rect[1]; + vertices[0].uv[0] = uv[0]; + vertices[0].uv[1] = uv[1]; + vertices[0].colour = colour; + vertices[1].co[0] = rect[0]+rect[2]; + vertices[1].co[1] = rect[1]; + vertices[1].uv[0] = uv[2]; + vertices[1].uv[1] = uv[1]; + vertices[1].colour = colour; + vertices[2].co[0] = rect[0]+rect[2]; + vertices[2].co[1] = rect[1]+rect[3]; + vertices[2].uv[0] = uv[2]; + vertices[2].uv[1] = uv[3]; + vertices[2].colour = colour; + vertices[3].co[0] = rect[0]; + vertices[3].co[1] = rect[1]+rect[3]; + vertices[3].uv[0] = uv[0]; + vertices[3].uv[1] = uv[3]; + vertices[3].colour = colour; + u16 ind_start = ctx->num_verts; + u16 *indices = &ctx->indices[ ctx->num_indices ]; + + ui_rect_copy( ctx->clipping, vertices[0].clip ); + ui_rect_copy( ctx->clipping, vertices[1].clip ); + ui_rect_copy( ctx->clipping, vertices[2].clip ); + ui_rect_copy( ctx->clipping, vertices[3].clip ); + + indices[0] = ind_start+0; + indices[1] = ind_start+2; + indices[2] = ind_start+1; + + indices[3] = ind_start+0; + indices[4] = ind_start+3; + indices[5] = ind_start+2; + + ctx->num_indices += 6; + ctx->num_verts += 4; + + return vertices; +} + +static struct ui_vert *ui_fill_rect( ui_ctx *ctx, ui_rect rect, u32 colour ) +{ + return ui_fill_rect_uv( ctx, rect, colour, (ui_px[4]){ 4,124,4,124 } ); +} + +static void ui_text_use_title( ui_ctx *ctx ) +{ + ctx->glyph_base = 0; +} + +static void ui_text_use_paragraph( ui_ctx *ctx ) +{ + ctx->glyph_base = 6; +} + +enum text_alignment +{ + k_text_alignment_left = 0, + k_text_alignment_center, + k_text_alignment_right +}; + +static ui_px ui_text( ui_ctx *ctx, const char *str, ui_px scale, enum text_alignment alignment ) +{ + ui_rect text_cursor; + + text_cursor[0] = ctx->cursor[0]; + text_cursor[1] = ctx->cursor[1]; + text_cursor[2] = (scale*8)/2; + text_cursor[3] = (scale*8)/2; + + u32 current_colour = ctx->override_colour; + + ui_px offset = 0; + if( alignment != k_text_alignment_left ) + { + const char *pch = str; + for(;;) + { + offset += (ui_glyph_spacing_x*scale)/4; + if( !(*pch) || *pch == '\n' ) + break; + pch ++; + } + + if( alignment == k_text_alignment_right ) + text_cursor[0] = ctx->cursor[0]+ctx->cursor[2]-offset; + else + text_cursor[0] = (ctx->cursor[0]+(ctx->cursor[2]/2))-(offset/2); + } + + const char *_c = str; + char c; + while( (c = *(_c ++)) ) + { + if( c == '\n' ) + { + text_cursor[1] += (7*scale)/2; + text_cursor[0] = ctx->cursor[0]; + continue; + } + else if( c >= 33 && c <= 126 ) + { + u8 glyph_base[2]; + u8 glyph_index = c - 32; + glyph_base[0] = (glyph_index&0xf); + glyph_base[1] = ctx->glyph_base + ((glyph_index-glyph_base[0])>>4); + + glyph_base[0] *= 8; + glyph_base[1] *= 8; + + ui_fill_rect_uv( ctx, text_cursor, current_colour, + (ui_px[4]){ + glyph_base[0], + 128-glyph_base[1], + glyph_base[0]+8, + 128-(glyph_base[1]+8) + }); + } + else if( c == '\x1B' ) + { + _c ++; + u16 colour_id = 0; + for( int i = 0; i < 3; i ++ ) + { + if( _c[i] ) + { + if( _c[i] == 'm' ) + { + _c = _c + i + 1; + + switch( colour_id ) + { + case '0': current_colour = 0xffffffff; break; + case '3'|'1'<<8: current_colour = 0xff201fee; break; + case '3'|'2'<<8: current_colour = 0xff37e420; break; + case '3'|'3'<<8: current_colour = 0xff0ed8e2; break; + case '3'|'4'<<8: current_colour = 0xfff15010; break; + case '3'|'5'<<8: current_colour = 0xffee20ee; break; + case '3'|'6'<<8: current_colour = 0xffeeee20; break; + case '3'|'7'<<8: current_colour = 0xffffffff; break; + } + + break; + } + + colour_id |= _c[i] << (i*8); + } + else + { + _c = _c +i; + break; + } + } + continue; + } + + text_cursor[0] += (ui_glyph_spacing_x*scale)/4; + } + + return text_cursor[0]; +} + // API control // ==================================================================== @@ -177,6 +692,16 @@ static void ui_begin( ui_ctx *ctx, ui_px res_x, ui_px res_y ) ctx->stack[0].mouse_over = 1; ctx->stack_count = 1; + + ctx->num_verts = 0; + ctx->num_indices = 0; + + ui_release_clip( ctx ); + + if( ctx->click_state == 0 ) + ctx->capture_mouse_id = 0; + + ctx->image_count = 0; } static void ui_resolve( ui_ctx *ctx ) @@ -213,6 +738,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 ); @@ -221,16 +754,23 @@ static int ui_button( ui_ctx *ctx, u32 id ) if( ui_hasmouse(ctx) ) { + ui_fill_rect( ctx, ctx->cursor, ctx->colours_current->hover ); + 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, ctx->colours_current->main ); } - return 0; + return k_button_released; } static int ui_window( ui_ctx *ctx, struct ui_window *window, u32 control_group ) @@ -255,28 +795,42 @@ static int ui_window( ui_ctx *ctx, struct ui_window *window, u32 control_group ) ui_new_node( ctx ); { ui_capture_mouse( ctx, __COUNTER__ ); - + // Drag bar ctx->cursor[3] = 25; ui_new_node( ctx ); { ui_capture_mouse( ctx, __COUNTER__ ); + struct ui_vert *drag_bar = ui_fill_rect( ctx, ctx->cursor, 0xff555555 ); + // title.. + ctx->cursor[0] += 2; + ctx->cursor[1] += 2; + ui_text( ctx, window->title, 2, 0 ); // Close button + ctx->cursor[3] = 25; ctx->cursor[2] = 25; ui_align_right( ctx ); - ui_rect_pad( ctx, ctx->cursor, 4 ); + ui_align_top( ctx ); + ui_rect_pad( ctx->cursor, 4 ); if( ui_button( ctx, __COUNTER__ ) ) { vg_info( "Click clacked\n" ); } + ctx->cursor[0] += 2; + ui_text( ctx, "x", 2, 0 ); ui_end( ctx ); if( ui_hasmouse( ctx ) ) { + 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 ) { @@ -286,60 +840,124 @@ static int ui_window( ui_ctx *ctx, struct ui_window *window, u32 control_group ) } } } - ui_end( ctx ); + ui_end_down( ctx ); } return 1; } -static void ui_test(void) -{ - /* - +------------------------------------------------------+ - | Central Market [x]| - +------+--------------+-+------------------------------+ - | Buy | Balance |#| [filters] [favorites] | - | <>_ | () 2,356 |#|----------------------------+-+ - |------|--------------|#| [] potion of madness 4 |#| - | Sell | \ Main sword |#|----------------------------|#| - | _*^ |--------------|#| [] Balance of time 23 | | - |------| * Side arm |#|----------------------------| | - | 235 |--------------| | [] Strength 5,300 | | - | | () Sheild | |----------------------------| | - | |--------------| | [] Bewilder 2,126 | | - | [ & Spells ] |----------------------------| | - | |--------------| | [] Eternal flames 6 | | - +------+--------------+-+----------------------------+-+ - */ - - static ui_ctx ctx = { .padding = 8 }; - - ui_begin( &ctx, vg_window_x, vg_window_y ); - - // TODO: Find a more elegent form for this - int mouse_state = 0; - if( vg_get_button( "primary" ) ) mouse_state = 2; - if( vg_get_button_down( "primary" ) ) mouse_state = 1; - if( vg_get_button_up( "primary" ) ) mouse_state = 3; - - ui_set_mouse( &ctx, vg_mouse[0], vg_mouse[1], mouse_state ); +struct ui_scrollbar +{ + int drag; + ui_px drag_offset; - static struct ui_window window = + 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 ) { - .transform = { 20, 20, 500, 350 }, - .title = "Central Market" - }; + 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; + } - if( ui_window( &ctx, &window, __COUNTER__ ) ) + ui_new_node( ctx ); { - // Contents + ui_fill_rect( ctx, ctx->cursor, ctx->colours_current->background ); + ui_capture_mouse( ctx, id ); + + 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, ctx->colours_current->bar ); + + if( ui_hasmouse( ctx ) || scrollbar->drag ) + { + drag_bar[0].colour = ctx->colours_current->bar_hover; + drag_bar[1].colour = ctx->colours_current->bar_hover; + drag_bar[2].colour = ctx->colours_current->bar_hover; + drag_bar[3].colour = ctx->colours_current->bar_hover; + + // 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 ); + ui_end( ctx ); +} - ui_resolve( &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) ); - m3x3f view = M3X3_IDENTITY; - m3x3_translate( view, (v3f){ -1.0f, 1.0f, 0.0f } ); - m3x3_scale( view, (v3f){ 1.0f/((float)vg_window_x*0.5f), -1.0f/((float)vg_window_y*0.5f), 1.0f } ); - vg_lines_drawall( (float*)view ); + float range = scrollbar->view_height - scrollbar->bar_height; + return ((float)scrollbar->py / range) * overlap; +} + +static void ui_override_colours( ui_ctx *ctx, ui_colourset *set ) +{ + ctx->colours_current = set; } + +static void ui_reset_colours( ui_ctx *ctx ) +{ + ctx->colours_current = ctx->colours_main; + ctx->override_colour = 0xffffffff; +} + +static void ui_push_image( ui_ctx *ctx, ui_rect rc, GLuint image ) +{ + struct ui_image *img = &ctx->images[ ctx->image_count ++ ]; + ui_rect_copy( rc, img->rc ); + img->image = image; +} + +// 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_end_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 ) +#define gui_push_image(...) ui_push_image( &ui_global_ctx, __VA_ARGS__ ) +#define gui_scrollbar(...) ui_scrollbar( &ui_global_ctx, __VA_ARGS__) +#define gui_override_colours(...) ui_override_colours( &ui_global_ctx, __VA_ARGS__) +#define gui_reset_colours(...) ui_reset_colours( &ui_global_ctx )