X-Git-Url: https://harrygodden.com/git/?a=blobdiff_plain;f=vg%2Fvg_ui.h;h=35a3e3b8df9294a8ab30aac94f4d2d41a33bbb72;hb=e00ea4ccba1891970699f9b5b78ba1ebaada2974;hp=27c0645cacf05236c6e3b5ca942a310d5c51ee5f;hpb=27f1751d523e9dee4ab00ec10666bbb3d8db74bc;p=fishladder.git

diff --git a/vg/vg_ui.h b/vg/vg_ui.h
index 27c0645..35a3e3b 100644
--- a/vg/vg_ui.h
+++ b/vg/vg_ui.h
@@ -1,21 +1,56 @@
 // Copyright (C) 2021 Harry Godden (hgn) - All Rights Reserved
-/*
 
-	Concurrent UI buffer system
-	Coordinate space:
+SHADER_DEFINE( shader_ui,
 
-   0,0 --- +(res:x)
-  	 |
-	 |
-	 |
-+(res:y)
+	// 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 = aColour * vec4( 1.0, 1.0, 1.0, glyph.r * 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];
@@ -34,17 +69,230 @@ 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;
 	
 	// User input
 	ui_px mouse[2];
 	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
+// ===========================================================================================================
+
+// Opengl
+int ui_glyph_override = 0;
+ui_px ui_glyph_spacing_x = 6;
+GLuint ui_glyph_texture = 0;
+GLuint ui_vao;
+GLuint ui_vbo;
+GLuint ui_ebo;
+
+#define UI_BUFFER_SIZE 30000
+#define UI_INDEX_SIZE 20000
+
+ui_ctx ui_global_ctx = { .padding = 8 };
+
+
+// Initialization
+// ===========================================================================================================
+
+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 );
+		
+		// Generate the buffer we are gonna be drawing to
+		glGenVertexArrays(1, &ui_vao);
+		glGenBuffers( 1, &ui_vbo );
+		glGenBuffers( 1, &ui_ebo );
+		glBindVertexArray( ui_vao );
+		
+		glBindBuffer( GL_ARRAY_BUFFER, ui_vbo );
+		
+		glBufferData( GL_ARRAY_BUFFER, UI_BUFFER_SIZE * sizeof( struct ui_vert ), NULL, GL_DYNAMIC_DRAW );
+		glBindVertexArray( ui_vao );
+		
+		glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, ui_ebo );
+		glBufferData( GL_ELEMENT_ARRAY_BUFFER, UI_INDEX_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
+	{
+		ui_global_ctx.verts = (struct ui_vert *)malloc( UI_BUFFER_SIZE * sizeof(struct ui_vert) );
+		ui_global_ctx.indices = (u16*)malloc( UI_INDEX_SIZE * sizeof(u16) );
+	}
+}
+
+static void ui_default_free(void)
+{
+	if( !ui_glyph_override )	
+		glDeleteTextures( 1, &ui_glyph_texture );
+	
+	glDeleteVertexArrays( 1, &ui_vao );
+	glDeleteBuffers( 1, &ui_vbo );
+	glDeleteBuffers( 1, &ui_ebo );
+	
+	free( ui_global_ctx.verts );
+	free( ui_global_ctx.indices );
+}
+
+static void ui_draw( ui_ctx *ctx, m3x3f view_override )
+{
+	glBindVertexArray( ui_vao );
+	
+	glBindBuffer( GL_ARRAY_BUFFER, ui_vbo );
+	glBufferSubData( GL_ARRAY_BUFFER, 0, ctx->num_verts * sizeof( struct ui_vert ), ctx->verts );
+	
+	glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, ui_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, ctx->num_indices, GL_UNSIGNED_SHORT, (void*)(0) );
+	
+	//vg_info( "Verts: %u, Indices: %u\n", ctx->num_verts, ctx->num_indices );
+	
+	glDisable(GL_BLEND);
+}
+
 // Rect controls
-// ==========================================================
+// ===========================================================================================================
 
 static void ui_rect_copy( ui_rect src, ui_rect dst )
 {
@@ -54,16 +302,17 @@ 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 )
+static void ui_rect_pad( ui_rect rect, ui_px pad )
 {
-	rect[0] += ctx->padding;
-	rect[1] += ctx->padding;
-	rect[2] -= ctx->padding*2;
-	rect[3] -= ctx->padding*2;
+	rect[0] += pad;
+	rect[1] += pad;
+	rect[2] -= pad*2;
+	rect[3] -= pad*2;
 }
 
 static void ui_vis_rect( ui_rect rect, u32 colour )
 {
+	#ifdef UI_DEBUG
 	v2f p0;
 	v2f p1;
 	
@@ -76,6 +325,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 )
@@ -95,11 +353,15 @@ static void ui_new_node( ui_ctx *ctx )
 		else
 			node->mouse_over = 0;
 	}
+	else
+	{
+		node->mouse_over = 0;
+	}
 }
 
 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));
 }
 
@@ -108,31 +370,237 @@ 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_capture_mouse( ui_ctx *ctx, int id )
+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 = 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] );
+	dest[1] = vg_min( parent[1] + parent[3] - dest[3], dest[1] );
+	dest[0] = vg_max( parent[0], dest[0] );
+	dest[1] = vg_max( parent[1], dest[1] );
+}
+
+static u32 ui_group_id( ui_ctx *ctx, u32 lesser_unique )
+{
+	return ctx->id_base | lesser_unique;
+}
+
+static void ui_capture_mouse( ui_ctx *ctx, u32 id )
+{
+	u32 group_uid = ui_group_id(ctx,id);
+
 	struct ui_qnode *node = &ctx->stack[ ctx->stack_count-1 ];
-	node->capture_id = id;
+	node->capture_id = group_uid;
+	
+	if( !ctx->capture_lock && node->mouse_over )
+	{
+		ctx->capture_mouse_id = group_uid;
+	}
+}
+
+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;
 	
-	if( node->mouse_over )
+	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( ui_ctx *ctx, const char *str, ui_px scale, int alignment )
+{
+	ui_rect text_cursor;
+
+	text_cursor[0] = ctx->cursor[0];
+	text_cursor[1] = ctx->cursor[1];
+	text_cursor[2] = scale*8;
+	text_cursor[3] = scale*8;
+
+	u32 current_colour = ctx->override_colour;
+
+	const char *_c = str;
+	char c;
+	while( (c = *(_c ++)) )
 	{
-		ctx->capture_mouse_id = id;
+		if( c == '\n' )
+		{
+			text_cursor[1] += 10*scale;
+			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] = (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)/2;
 	}
 }
 
@@ -150,12 +618,25 @@ 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;
 }
 
 static void ui_resolve( ui_ctx *ctx )
 {
 	if( ctx->stack_count-1 )
 		vg_exiterr( "[UI] Mismatched node create/drestroy!" );
+	
+	if( ctx->click_state == 3 || ctx->click_state == 0 )
+	{
+		ctx->capture_lock = 0;
+	}
 }
 
 // User Input piping
@@ -169,90 +650,187 @@ static void ui_set_mouse( ui_ctx *ctx, int x, int y, int click_state )
 	ctx->click_state = click_state;
 }
 
-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 | |
-		+------+--------------+-+----------------------------+-+
-	*/
-	
-	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;
+// High level controls
+// ====================================================================
+
+struct ui_window
+{
+	const char *title;
+	ui_rect transform;
+	
+	int 	drag;
+	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 );
+	{
+		ui_capture_mouse( ctx, id );
 		
-	ui_set_mouse( &ctx, vg_mouse[0], vg_mouse[1], mouse_state );
+		if( ui_hasmouse(ctx) )
+		{
+			ui_fill_rect( ctx, ctx->cursor, 0xffcccccc );
+			
+			if( ctx->click_state == 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 );
+	}
 	
-	static ui_px window_x = 20;
-	static ui_px window_y = 20;
-	static int window_drag = 0;
-	static ui_px drag_offset[2];
+	return k_button_released;
+}
 
-	if( window_drag )
+static int ui_window( ui_ctx *ctx, struct ui_window *window, u32 control_group )
+{
+	ctx->id_base = control_group << 16;
+
+	if( window->drag )
 	{
-		window_x = ctx.mouse[0]+drag_offset[0];
-		window_y = ctx.mouse[1]+drag_offset[1];
+		window->transform[0] = ctx->mouse[0]+window->drag_offset[0];
+		window->transform[1] = ctx->mouse[1]+window->drag_offset[1];
+		
+		ui_clamp_rect( ctx->stack[0].rect, window->transform );
 		
-		if( ctx.click_state == 0 )
+		if( ctx->click_state == 0 || ctx->click_state == 3 )
 		{
-			window_drag = 0;
+			window->drag = 0;
 		}
 	}
 	
-	ctx.cursor[0] = window_x;
-	ctx.cursor[1] = window_y;
-	ctx.cursor[2] = 500;
-	ctx.cursor[3] = 350;
+	ui_rect_copy( window->transform, ctx->cursor );
 	
-	ui_new_node( &ctx );
+	ui_new_node( ctx );
 	{
-		ctx.cursor[0] += 20;
-		ctx.cursor[1] += 20;
-		ctx.cursor[2] = 150;
-		ctx.cursor[3] = 25;
+		ui_capture_mouse( ctx, __COUNTER__ );
 		
-		ui_capture_mouse( &ctx, 1 );
-		
-		ui_new_node( &ctx );
+		// Drag bar
+		ctx->cursor[3] = 25;		
+		ui_new_node( ctx );
 		{
-			ui_capture_mouse( &ctx, 2 );
+			ui_capture_mouse( ctx, __COUNTER__ );
+			
+			struct ui_vert *drag_bar = ui_fill_rect( ctx, ctx->cursor, 0xff555555 );
 			
-			if( ui_hasmouse( &ctx ) )
+			// 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_align_top( ctx );
+			ui_rect_pad( ctx->cursor, 4 );
+			
+			if( ui_button( ctx, __COUNTER__ ) )
 			{
-				if( ctx.click_state == 1 ) // start drag
+				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 )
 				{
-					window_drag = 1;
-					drag_offset[0] = window_x-ctx.mouse[0];
-					drag_offset[1] = window_y-ctx.mouse[1];
+					window->drag = 1;
+					window->drag_offset[0] = window->transform[0]-ctx->mouse[0];
+					window->drag_offset[1] = window->transform[1]-ctx->mouse[1];
 				}
 			}
 		}
-		ui_end( &ctx );
+		ui_end_down( ctx );
 	}
-	ui_end( &ctx );
 	
-	ui_resolve( &ctx );
+	return 1;
+}
+
+struct ui_scrollbar
+{
+	int 	drag;
+	ui_px drag_offset;
 	
-	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 );
+	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;
 }