bad char
[vg.git] / vg_imgui.c
index 08209b7d2ef44c1d3259416f529df2da3ab2ce0f..bb4f46f54d7f7d152904985871c75d0f9f6c2140 100644 (file)
@@ -24,26 +24,7 @@ ui_px k_ui_widget_height = 28,
       k_ui_scale = 1,
       k_ui_padding = 8;
 
-ui_font vg_ui_font_small = {
-   .glyph_width    = 8,
-   .glyph_height   = 14,
-   .glyph_baseline = 4,
-   .line_height    = 14,
-   .sheet_size     = 256,
-   .spacing        = 8,
-   .ascii_start    = ' ',
-   .offset_y = 0
-},
-vg_ui_font_big = {
-   .glyph_width  = 12,
-   .glyph_height = 21,
-   .glyph_baseline = 6,
-   .line_height = 21,
-   .sheet_size = 256,
-   .spacing = 10,
-   .ascii_start = ' ',
-   .offset_y = 84
-};
+#include "vg/vg_default_font.gc"
 
 struct vg_imgui vg_ui = {
    .scheme = {
@@ -82,7 +63,7 @@ struct vg_imgui vg_ui = {
       [ k_ui_purple + k_ui_brighter ] = UI_RGB( 0xd3869b ),
       [ k_ui_gray   + k_ui_brighter ] = UI_RGB( 0xa89984 ),
    },
-   .font = &vg_ui_font_small,
+   .font = &vgf_default_small,
    .colour = {1.0f,1.0f,1.0f,1.0f},
    .bg_inverse_ratio = {1,1}
 };
@@ -97,6 +78,7 @@ static struct vg_shader _shader_ui ={
        "layout (location=2) in vec4 a_colour;"
        "uniform mat3 uPv;"
    "uniform vec2 uBGInverseRatio;"
+   "uniform vec2 uInverseFontSheet;"
        ""
        "out vec4 aTexCoords;"
        "out vec4 aColour;"
@@ -104,7 +86,7 @@ static struct vg_shader _shader_ui ={
        "void main(){"
       "vec4 proj_pos = vec4( uPv * vec3( a_co, 1.0 ), 1.0 );"
                "gl_Position = proj_pos;"
-               "aTexCoords = vec4( a_uv * 0.00390625, "
+               "aTexCoords = vec4( a_uv * uInverseFontSheet, "
                         " (proj_pos.xy*0.5+0.5) * uBGInverseRatio );"
                "aColour = a_colour;"
        "}",
@@ -312,28 +294,36 @@ void vg_ui_init(void)
     */
    
        /* Load default font */
-   u32 compressed[] = {
-      #include "vg/vg_pxfont_thin.h"
-   };
 
-   u32 pixels = 0, total = 256*256, data = 0;
-   u8 image[256*256];
+   vg_font_sheet *sheet = &vg_default_font_sheet;
+   u32 pixels = 0, 
+       total = sheet->w*sheet->h,
+       data = 0;
+
+   vg_linear_clear( vg_mem.scratch );
+   u8 *image = vg_linear_alloc( vg_mem.scratch, total );
    
-   while( pixels < total ){
-      for( int b = 31; b >= 0; b-- ){
-         image[ pixels ++ ] = (compressed[data] & (0x1u << b))? 0xffu: 0x00u;
+   while( pixels < total )
+   {
+      for( int b = 31; b >= 0; b-- )
+      {
+         image[ pixels ++ ] = (sheet->bitmap[data] & (0x1u << b))? 0xffu: 0x00u;
          
-         if( pixels >= total ){
+         if( pixels >= total )
+         {
             total = 0;
             break;
          }
       }
       data++;
    }
+
+   vg_ui.inverse_font_sheet[0] = 1.0/(f64)sheet->w;
+   vg_ui.inverse_font_sheet[1] = 1.0/(f64)sheet->h;
    
    glGenTextures( 1, &vg_ui.tex_glyphs );
    glBindTexture( GL_TEXTURE_2D, vg_ui.tex_glyphs );
-   glTexImage2D( GL_TEXTURE_2D, 0, GL_R8, 256, 256, 0, 
+   glTexImage2D( GL_TEXTURE_2D, 0, GL_R8, sheet->w, sheet->h, 0, 
                  GL_RED, GL_UNSIGNED_BYTE, image );
 
    VG_CHECK_GL_ERR();
@@ -411,6 +401,8 @@ void ui_flush( enum ui_shader shader, f32 w, f32 h ){
                    vg_ui.frosting );
       glUniform2fv( glGetUniformLocation( _shader_ui.id, "uBGInverseRatio" ),
                      1, vg_ui.bg_inverse_ratio );
+      glUniform2fv( glGetUniformLocation( _shader_ui.id, "uInverseFontSheet" ),
+                     1, vg_ui.inverse_font_sheet );
    }
    else if( shader == k_ui_shader_image ){
       glUseProgram( _shader_ui_image.id );
@@ -438,17 +430,20 @@ void ui_flush( enum ui_shader shader, f32 w, f32 h ){
    vg_ui.vert_start = vg_ui.cur_vert;
 }
 
-void ui_fill_rect( ui_rect rect, u32 colour, ui_px uv[4] )
+struct ui_vert *ui_fill_rect( ui_rect rect, u32 colour, ui_px uv[4] )
 {
    /* this if far from ideal but stops us from crashing */
    if( (vg_ui.cur_vert + 4 > vg_ui.max_verts) || 
        (vg_ui.cur_indice + 6 > vg_ui.max_indices))
-      return;
+   {
+      return &vg_ui.vertex_buffer[0];
+   }
 
    struct ui_vert *vertices = &vg_ui.vertex_buffer[ vg_ui.cur_vert ];
        u16            *indices  = &vg_ui.indice_buffer[ vg_ui.cur_indice ];
 
-   for( int i=0; i<4; i++ ){
+   for( int i=0; i<4; i++ )
+   {
       vertices[i].colour = colour;
    }
 
@@ -473,17 +468,20 @@ void ui_fill_rect( ui_rect rect, u32 colour, ui_px uv[4] )
        u16 start = vg_ui.cur_vert;
    u32 mesh[] = { 0,2,1, 0,3,2 };
 
-   for( u32 i=0; i<vg_list_size(mesh); i++ ){
+   for( u32 i=0; i<vg_list_size(mesh); i++ )
+   {
       indices[i] = start+mesh[i];
    }
 
        vg_ui.cur_indice += 6;
        vg_ui.cur_vert += 4;
+
+   return vertices;
 }
 
-void ui_fill( ui_rect rect, u32 colour )
+struct ui_vert *ui_fill( ui_rect rect, u32 colour )
 {
-   ui_fill_rect( rect, colour, (ui_px[4]){ 4,4,4,4 } );
+   return ui_fill_rect( rect, colour, (ui_px[4]){ 4,4,4,4 } );
 }
 
 void ui_outline( ui_rect rect, ui_px thickness, u32 colour, u32 mask )
@@ -604,7 +602,7 @@ ui_px ui_text_line_width( const char *str )
       else if( c == '\n' ) break;
    }
 
-   return length * vg_ui.font->spacing;
+   return length * vg_ui.font->sx;
 }
 
 ui_px ui_text_string_height( const char *str )
@@ -613,11 +611,12 @@ ui_px ui_text_string_height( const char *str )
    const char *_c = str;
    u8 c;
 
-   while( (c = *(_c ++)) ){
+   while( (c = *(_c ++)) )
+   {
       if( c == '\n' ) height ++;
    }
 
-   return height * 14;
+   return height * vg_ui.font->sy;
 }
 
 ui_px ui_text_aligned_x( const char *str, ui_rect rect, ui_px scale,
@@ -741,7 +740,8 @@ void ui_prerender(void)
       return;
    }
 
-   if( ui_click_down(UI_MOUSE_LEFT)||ui_click_down(UI_MOUSE_MIDDLE) )
+   if( ui_click_down(UI_MOUSE_LEFT)||ui_click_down(UI_MOUSE_MIDDLE)||
+       ui_click_down(UI_MOUSE_RIGHT) )
    {
       vg_ui.mouse_click[0] = vg_ui.mouse[0];
       vg_ui.mouse_click[1] = vg_ui.mouse[1];
@@ -782,18 +782,15 @@ u32 v4f_u32_colour( v4f colour )
    return r | (g<<8) | (b<<16) | (a<<24);
 }
 
-static void ui_text_glyph( const struct ui_font *font, ui_px scale,
-                           u8 glyph, ui_rect out_texcoords ){
-   glyph -= font->ascii_start;
+static void ui_text_glyph( const struct vg_font_face *ff,
+                           u8 glyph, ui_rect out_texcoords )
+{
+   const vg_font_char *ch = &ff->map[ glyph ];
 
-   ui_px per_row = font->sheet_size / font->glyph_width,
-         column  = (ui_px)glyph % per_row,
-         row     = (glyph - column) / per_row;
-   
-   out_texcoords[0] = column * font->glyph_width;
-   out_texcoords[1] = row * font->glyph_height + font->offset_y;
-   out_texcoords[2] = out_texcoords[0] + font->glyph_width;
-   out_texcoords[3] = out_texcoords[1] + font->glyph_height;
+   out_texcoords[0] = ch->x;
+   out_texcoords[1] = ch->y;
+   out_texcoords[2] = ch->x + ff->cw;
+   out_texcoords[3] = ch->y + ff->ch;
 }
 
 u32 ui_opacity( u32 colour, f32 opacity )
@@ -805,6 +802,8 @@ u32 ui_opacity( u32 colour, f32 opacity )
 u32 ui_ntext( ui_rect rect, const char *str, u32 len, ui_px scale, 
               enum ui_align align, u32 colour )
 {
+   ui_px glow_text = 0;
+
        ui_rect text_cursor;
    if( colour == 0 ) colour = ui_colour( k_ui_fg );
 
@@ -815,12 +814,13 @@ u32 ui_ntext( ui_rect rect, const char *str, u32 len, ui_px scale,
 
    text_cursor[0] = ui_text_aligned_x( str, rect, scale, align );
        text_cursor[1] = rect[1];
-       text_cursor[2] = vg_ui.font->glyph_width*scale;
-       text_cursor[3] = vg_ui.font->glyph_height*scale;
+       text_cursor[2] = vg_ui.font->cw*scale;
+       text_cursor[3] = vg_ui.font->ch*scale;
 
    u32 printed_chars = 0;
 
-   if( align & (k_ui_align_middle|k_ui_align_bottom) ){
+   if( align & (k_ui_align_middle|k_ui_align_bottom) )
+   {
       ui_px height = ui_text_string_height( str ) * scale;
 
       if( align & k_ui_align_bottom )
@@ -829,41 +829,57 @@ u32 ui_ntext( ui_rect rect, const char *str, u32 len, ui_px scale,
          text_cursor[1] += (rect[3]-height)/2;
    }
 
-       while( (c = *(_c ++)) ){
-      if( printed_chars >= len ){
+       while( (c = *(_c ++)) )
+   {
+      if( printed_chars >= len )
+      {
          printed_chars = 0;
-                       text_cursor[1] += vg_ui.font->line_height*scale;
+                       text_cursor[1] += vg_ui.font->sy*scale;
          text_cursor[0] = ui_text_aligned_x( _c, rect, scale, align );
-         text_cursor[0] -= vg_ui.font->spacing*scale;
+         text_cursor[0] -= vg_ui.font->sx*scale;
 
          ui_rect glyph;
-         ui_text_glyph( vg_ui.font, scale, '\xb6' /*FIXME*/, glyph );
+         ui_text_glyph( vg_ui.font, '\xb1' /*FIXME*/, glyph );
          ui_fill_rect( text_cursor, 0x00ffffff, glyph );
-         text_cursor[0] += vg_ui.font->spacing*scale;
+         text_cursor[0] += vg_ui.font->sx*scale;
       }
 
-               if( c == '\n' ){
-                       text_cursor[1] += vg_ui.font->line_height*scale;
+               if( c == '\n' )
+      {
+                       text_cursor[1] += vg_ui.font->sy*scale;
          text_cursor[0] = ui_text_aligned_x( _c, rect, scale, align );
          printed_chars = 0;
                        continue;
                }
-               else if( c >= 33 ){
+               else if( c >= 33 )
+      {
          ui_rect glyph;
-         ui_text_glyph( vg_ui.font, scale, c, glyph );
+         ui_text_glyph( vg_ui.font, c, glyph );
 
          ui_rect cursor_clipped;
-         if( ui_clip( rect, text_cursor, cursor_clipped ) ){
+         if( ui_clip( rect, text_cursor, cursor_clipped ) )
+         {
+            if( glow_text )
+            {
+               cursor_clipped[1] += glow_text;
+               ui_fill_rect( cursor_clipped, 0x00ffffff, glyph );
+               cursor_clipped[1] -= glow_text;
+            }
+
             ui_fill_rect( cursor_clipped, colour, glyph );
          }
                }
-               else if( c == '\x1B' ){
+               else if( c == '\x1B' )
+      {
          /* vt codes */
                        _c ++;
                        u16 colour_id = 0;
-                       for( int i=0; i<3; i ++ ){
-                               if( _c[i] ){
-                                       if( _c[i] == 'm' ){
+                       for( int i=0; i<3; i ++ )
+         {
+                               if( _c[i] )
+            {
+                                       if( _c[i] == 'm' )
+               {
                                                _c = _c + i + 1;
                                                
                                                switch( colour_id ){
@@ -884,7 +900,8 @@ u32 ui_ntext( ui_rect rect, const char *str, u32 len, ui_px scale,
                                        
                                        colour_id |= _c[i] << (i*8);
                                } 
-                               else{
+                               else
+            {
                                        _c = _c +i;
                                        break;
                                }
@@ -892,23 +909,35 @@ u32 ui_ntext( ui_rect rect, const char *str, u32 len, ui_px scale,
 
          continue;
                }
-      else if( c == '\t' ){
-         text_cursor[0] += vg_ui.font->spacing*scale*4;
+      else if( c == '\x06' )
+      {
+         glow_text = *_c;
+         _c ++;
+         continue;
+      }
+      else if( c == '\t' )
+      {
+         text_cursor[0] += vg_ui.font->sx*scale*4;
          printed_chars += 4;
          continue;
       }
                
-       text_cursor[0] += vg_ui.font->spacing*scale;
+       text_cursor[0] += vg_ui.font->sx*scale;
       printed_chars ++;
        }
 
    return printed_chars;
 }
 
-void ui_text( ui_rect rect, const char *str, ui_px scale, 
-              enum ui_align align, u32 colour )
+u32 ui_text( ui_rect rect, const char *str, ui_px scale, 
+             enum ui_align align, u32 colour )
+{
+   return ui_ntext( rect, str, 1024, scale, align, colour );
+}
+
+void ui_font_face( vg_font_face *ff )
 {
-   ui_ntext( rect, str, 1024, scale, align, colour );
+   vg_ui.font = ff;
 }
 
 /*
@@ -928,14 +957,14 @@ void ui_label( ui_rect rect, const char *text, ui_px size,
                ui_px gap, ui_rect r )
 {
    ui_rect l;
-   ui_px width = (ui_text_line_width(text)+vg_ui.font->spacing) * size;
+   ui_px width = (ui_text_line_width(text)+vg_ui.font->sx) * size;
    ui_split( rect, k_ui_axis_v, width, gap, l, r );
    ui_text( l, text, 1, k_ui_align_middle_left, 0 );
 }
 
 void ui_standard_widget( ui_rect inout_panel, ui_rect out_rect, ui_px count )
 {
-   ui_px height = (count * vg_ui.font->glyph_height + 18) * k_ui_scale;
+   ui_px height = (count * vg_ui.font->sy + 18) * k_ui_scale;
    ui_split( inout_panel, k_ui_axis_h, height, k_ui_padding, 
              out_rect, inout_panel );
 }
@@ -969,92 +998,100 @@ void ui_defocus_all(void)
    vg_ui.focused_control_type = k_ui_control_none;
 }
 
-/* TODO: split this out into a formatless button and one that auto fills */
-enum ui_button_state ui_colourbutton( ui_rect rect, 
-                                      enum ui_scheme_colour colour,
-                                      enum ui_scheme_colour hover_colour,
-                                      enum ui_scheme_colour hi_colour,
-                                      bool const fill )
+enum ui_button_state ui_button_base( ui_rect rect )
 {
    int clickup= ui_click_up(UI_MOUSE_LEFT),
        click  = ui_clicking(UI_MOUSE_LEFT) | clickup,
        target = ui_inside_rect( rect, vg_ui.mouse_click ) && click,
        hover  = ui_inside_rect( rect, vg_ui.mouse );
 
-   u32 col_base      = vg_ui.scheme[ colour ],
-       col_highlight = vg_ui.scheme[ hi_colour? hi_colour: k_ui_fg ],
-       col_hover     = vg_ui.scheme[ hover_colour? hover_colour: 
-                                     colour + k_ui_brighter ];
-
-   if( vg_ui.focused_control_type != k_ui_control_none ){
+   if( vg_ui.focused_control_type != k_ui_control_none )
+   {
       clickup = 0;
       click = 0;
       target = 0;
       hover = 0;
    }
 
-   if( hover ){
+   if( hover )
       vg_ui.cursor = k_ui_cursor_hand;
-   }
 
-   if( click ){
-      if( target ){
-         if( hover ){
-            if( clickup ){
+   if( click )
+   {
+      if( target )
+      {
+         if( hover )
+         {
+            if( clickup )
+            {
                vg_ui.ignore_input_frames = 2;
                ui_defocus_all();
-
-               if( fill ) {
-                  ui_fill( rect, col_highlight );
-                  rect_copy( rect, vg_ui.click_fader );
-                  rect_copy( rect, vg_ui.click_fader_end );
-                  vg_ui.click_fader_end[3] = 0;
-                  ui_rect_center( rect, vg_ui.click_fader_end );
-                  vg_ui.click_fade_opacity = 1.0f;
-               }
-
                return k_ui_button_click;
             }
-            else{
-               if( fill ) ui_fill( rect, col_highlight );
-               return k_ui_button_holding_inside;
-            }
-         }
-         else{
-            if( fill ) ui_fill( rect, col_base );
-            ui_outline( rect, 1, col_highlight, 0 );
-            return k_ui_button_holding_outside;
+            else return k_ui_button_holding_inside;
          }
+         else return k_ui_button_holding_outside;
       }
-      else{
-         if( fill ) ui_fill( rect, col_base );
-         return k_ui_button_none;
-      }
+      else return k_ui_button_none;
    }
-   else{
-      if( hover ){
-         if( fill ) ui_fill( rect, col_hover );
-         return k_ui_button_hover;
-      }
-      else{
-         if( fill ) ui_fill( rect, col_base );
-         return k_ui_button_none;
-      }
+   else
+   {
+      if( hover ) return k_ui_button_hover;
+      else return k_ui_button_none;
    }
 }
 
+/* TODO: split this out into a formatless button and one that auto fills */
+enum ui_button_state ui_colourbutton( ui_rect rect, 
+                                      enum ui_scheme_colour colour,
+                                      enum ui_scheme_colour hover_colour,
+                                      enum ui_scheme_colour hi_colour )
+{
+   enum ui_button_state state = ui_button_base( rect );
+
+   u32 col_base      = vg_ui.scheme[ colour ],
+       col_highlight = vg_ui.scheme[ hi_colour? hi_colour: k_ui_fg ],
+       col_hover     = vg_ui.scheme[ hover_colour? hover_colour: 
+                                     colour + k_ui_brighter ];
+
+   if( state == k_ui_button_click )
+   {
+      ui_fill( rect, col_highlight );
+      rect_copy( rect, vg_ui.click_fader );
+      rect_copy( rect, vg_ui.click_fader_end );
+      vg_ui.click_fader_end[3] = 0;
+      ui_rect_center( rect, vg_ui.click_fader_end );
+      vg_ui.click_fade_opacity = 1.0f;
+   }
+   else if( state == k_ui_button_holding_inside )
+   {
+      ui_fill( rect, col_highlight );
+   }
+   else if( state == k_ui_button_holding_outside )
+   {
+      ui_fill( rect, col_base );
+      ui_outline( rect, 1, col_highlight, 0 );
+   }
+   else if( state == k_ui_button_hover )
+   {
+      ui_fill( rect, col_hover );
+   }
+   else ui_fill( rect, col_base );
+
+   return state;
+}
+
 enum ui_button_state ui_colourbutton_text( 
       ui_rect rect, const char *string, ui_px scale,
-      enum ui_scheme_colour colour ){
-   enum ui_button_state state = ui_colourbutton( rect, colour, 0, 0, 1 );
-   ui_rect t = { 0,0, ui_text_line_width( string )*scale, 14*scale };
-   ui_rect_center( rect, t );
+      enum ui_scheme_colour colour )
+{
+   enum ui_button_state state = ui_colourbutton( rect, colour, 0, 0 );
 
    u32 text_colour = ui_colourcont(colour);
    if( state == k_ui_button_holding_inside )
       text_colour = colour;
 
-   ui_text( t, string, scale, k_ui_align_left, text_colour );
+   ui_text( rect, string, scale, k_ui_align_middle_center, text_colour );
    return state;
 }
 
@@ -1122,8 +1159,8 @@ void ui_postrender(void)
       
       ui_rect row0, row1, btn;
       ui_split_ratio( message, k_ui_axis_h, 0.5f, 0, row0, row1 );
-      row0[0] += vg_ui.font->spacing;
-      ui_ntext( row0, vg_ui.modal.message, (box[2]/vg_ui.font->spacing)-2, 1, 
+      row0[0] += vg_ui.font->sx;
+      ui_ntext( row0, vg_ui.modal.message, (box[2]/vg_ui.font->sx)-2, 1, 
                 k_ui_align_left, colour );
 
       rect_copy( row1, btn );
@@ -1162,6 +1199,14 @@ void ui_postrender(void)
  * -----------------------------------------------------------------------------
  */
 
+enum ui_button_state ui_checkbox_base( ui_rect box, i32 *data )
+{
+   enum ui_button_state state = ui_button_base( box );
+   if( state == k_ui_button_click )
+      *data = (*data) ^ 0x1;
+   return state;
+}
+
 int ui_checkbox( ui_rect inout_panel, const char *str_label, i32 *data )
 {
    ui_rect rect, label, box;
@@ -1169,12 +1214,34 @@ int ui_checkbox( ui_rect inout_panel, const char *str_label, i32 *data )
 
    ui_split( rect, k_ui_axis_v, -rect[3], 0, label, box );
    ui_text( label, str_label, k_ui_scale, k_ui_align_middle_left, 0 );
+   
+   enum ui_button_state state = ui_checkbox_base( box, data );
 
-   int changed = ui_colourbutton( box, k_ui_bg, 0, 0, 1 )==1;
-   if( changed )
-      *data = (*data) ^ 0x1;
+   if( state == k_ui_button_holding_inside )
+   {
+      ui_fill( box, ui_colour(k_ui_bg+2) );
+      ui_outline( box, 1, ui_colour(k_ui_fg), 0 );
+   }
+   else if( state == k_ui_button_holding_outside )
+   {
+      ui_fill( box, ui_colour(k_ui_bg) );
+      ui_outline( box, 1, ui_colour(k_ui_fg), 0 );
+   }
+   else if( state == k_ui_button_hover )
+   {
+      ui_fill( box, ui_colour(k_ui_bg) );
+      ui_outline( box, 1, ui_colour(k_ui_fg), 0 );
+   }
+   else 
+   {
+      ui_fill( box, ui_colour(k_ui_bg) );
+      ui_outline( box, 1, ui_colour(k_ui_bg+4), 0 );
+   }
 
-   if( *data ){
+   bool changed = (state == k_ui_button_click);
+
+   if( *data )
+   {
       ui_rect_pad( box, (ui_px[2]){4,4} );
       ui_fill( box, ui_colour( k_ui_orange ) );
    }
@@ -1264,57 +1331,67 @@ static void ui_enum_post(void){
  * -----------------------------------------------------------------------------
  */
 
-static enum ui_button_state _ui_slider
-      ui_rect box, f32 min, f32 max, f32 *value, const char *format )
+enum ui_button_state ui_slider_base
+      ui_rect box, f32 min, f32 max, f32 *value, f32 *out_t )
 {
-   f32 t;
-
-   enum ui_button_state 
-      mask_using = 
-         k_ui_button_holding_inside |
-         k_ui_button_holding_outside |
-         k_ui_button_click,
-      mask_brighter =
-         mask_using | k_ui_button_hover,
-      state = ui_colourbutton( box, k_ui_bg, k_ui_bg+2, k_ui_bg+3, 1 );
+   enum ui_button_state mask_using = 
+                           k_ui_button_holding_inside |
+                           k_ui_button_holding_outside |
+                           k_ui_button_click,
+      state = ui_button_base( box );
 
-   if( state & mask_using ){
-      t = vg_clampf( (f32)(vg_ui.mouse[0] - box[0]) / (f32)( box[2] ),
-                     0.0f, 1.0f );
+   f32 t;
+   if( state & mask_using )
+   {
+      t = vg_clampf( (f32)(vg_ui.mouse[0] - box[0]) / (f32)( box[2] ), 0,1 );
       *value = vg_lerpf( min, max, t );
    }
    else
       t = vg_clampf( (*value - min) / (max-min), 0.0f, 1.0f );
-   
-   ui_rect line     = { box[0], box[1], t * (f32)box[2], box[3] };
-   ui_fill( line, ui_colour(state&mask_brighter? k_ui_bg+4: k_ui_bg+2) );
 
-   ui_outline( box, 1, ui_colour(state? k_ui_fg+3: k_ui_bg+3), 0 );
+   *out_t = t;
+   
+   return state;
+}
 
+void ui_slider_text( ui_rect box, const char *format, f32 value )
+{
    /* TODO: replace this one day with our own function */
    char buf[32];
-   snprintf( buf, sizeof(buf), format? format: "%.2f", *value );
+   snprintf( buf, sizeof(buf), format? format: "%.2f", value );
    ui_text( box, buf, 1, k_ui_align_middle_center, 0 );
-
-   return state;
 }
 
-bool ui_slider( ui_rect inout_panel, const char *str_label, 
-                f32 min, f32 max, f32 *value, const char *format )
+bool ui_slider_standard( ui_rect box, f32 min, f32 max, f32 *value,
+                         const char *format )
 {
-   ui_rect rect, label, box;
-   ui_standard_widget( inout_panel, rect, 1 );
-   ui_label( rect, str_label, k_ui_scale, 0, box );
+   f32 t;
 
    enum ui_button_state mask_using = 
          k_ui_button_holding_inside |
          k_ui_button_holding_outside |
-         k_ui_button_click;
+         k_ui_button_click,
+      mask_brighter = mask_using | k_ui_button_hover,
+      state = ui_slider_base( box, min, max, value, &t );
 
-   if( _ui_slider( box, min, max, value, format ) & mask_using )
-      return 1;
-   else
-      return 0;
+   ui_rect line = { box[0], box[1], t * (f32)box[2], box[3] };
+   ui_fill( line, ui_colour(state&mask_brighter? k_ui_bg+4: k_ui_bg+2) );
+
+   ui_fill( (ui_rect){ box[0]+line[2], box[1], box[2]-line[2], box[3] },
+               ui_colour( k_ui_bg ) );
+   ui_outline( box, 1, ui_colour(state? k_ui_fg+3: k_ui_bg+3), 0 );
+   ui_slider_text( box, NULL, *value );
+
+   return (state & mask_using) && 1;
+}
+
+bool ui_slider( ui_rect inout_panel, const char *str_label, 
+                f32 min, f32 max, f32 *value )
+{
+   ui_rect rect, label, box;
+   ui_standard_widget( inout_panel, rect, 1 );
+   ui_label( rect, str_label, k_ui_scale, 0, box );
+   return ui_slider_standard( box, min, max, value, NULL );
 }
 
 /*
@@ -1339,8 +1416,9 @@ void ui_colourpicker( ui_rect inout_panel, const char *str_label, v4f value )
 
    enum ui_button_state modified = 0x00;
 
-   for( u32 i=0; i<4; i ++ ){
-      modified |= _ui_slider( sliders[i], 0.0f, 1.0f, hsv+i, 
+   for( u32 i=0; i<4; i ++ )
+   {
+      modified |= ui_slider_standard( sliders[i], 0.0f, 1.0f, hsv+i,
                      (const char *[]){ "hue %.2f",
                                        "sat %.2f",
                                        "lum %.2f",
@@ -1350,7 +1428,7 @@ void ui_colourpicker( ui_rect inout_panel, const char *str_label, v4f value )
    ui_rect preview, square;
    ui_split_ratio( left, k_ui_axis_v, 0.8f, 8, square, preview );
 
-   u32 state = ui_colourbutton( square, 0, 0, 0, 0 );
+   u32 state = ui_button_base( square );
    modified |= state;
 
    enum ui_button_state 
@@ -1359,7 +1437,8 @@ void ui_colourpicker( ui_rect inout_panel, const char *str_label, v4f value )
          k_ui_button_holding_outside |
          k_ui_button_click;
    
-   if( state & mask_using ){
+   if( state & mask_using )
+   {
       for( u32 i=0; i<2; i ++ ){
          hsv[1+i] = vg_clampf( 
                         (f32)(vg_ui.mouse[i] - square[i]) / (f32)(square[2+i]),
@@ -1370,7 +1449,8 @@ void ui_colourpicker( ui_rect inout_panel, const char *str_label, v4f value )
    }
 
    if( modified & (k_ui_button_click|k_ui_button_holding_inside|
-                   k_ui_button_holding_outside) ){
+                   k_ui_button_holding_outside) )
+   {
       vg_hsv_rgb( hsv, value );
       value[3] = hsv[3];
    }
@@ -1409,7 +1489,8 @@ void ui_colourpicker( ui_rect inout_panel, const char *str_label, v4f value )
  * -----------------------------------------------------------------------------
  */
 
-static void _ui_textbox_make_selection( int *start, int *end ){
+static void _ui_textbox_make_selection( int *start, int *end )
+{
        *start = VG_MIN( vg_ui.textbox.cursor_pos, vg_ui.textbox.cursor_user );
        *end   = VG_MAX( vg_ui.textbox.cursor_pos, vg_ui.textbox.cursor_user );
 }
@@ -1427,7 +1508,8 @@ void _ui_textbox_move_cursor( int *cursor0, int *cursor1,
                *cursor1 = *cursor0;
 }
 
-static int _ui_textbox_makeroom( int datastart, int length ){
+static int _ui_textbox_makeroom( int datastart, int length )
+{
        int move_to = VG_MIN( datastart+length, vg_ui.textbox.len-1 );
        int move_amount = strlen( vg_ui.textbuf )-datastart;
        int move_end = VG_MIN( move_to+move_amount, vg_ui.textbox.len-1 );
@@ -1466,7 +1548,8 @@ int _ui_textbox_delete_char( int direction )
        return start;
 }
 
-static void _ui_textbox_to_clipboard(void){
+static void _ui_textbox_to_clipboard(void)
+{
        int start, end;
        _ui_textbox_make_selection( &start, &end );
        char buffer[512];
@@ -1478,7 +1561,8 @@ static void _ui_textbox_to_clipboard(void){
        }
 }
 
-static void _ui_textbox_change_callback(void){
+static void _ui_textbox_change_callback(void)
+{
    if( vg_ui.textbox.callbacks.change ){
       vg_ui.textbox.callbacks.change( vg_ui.textbuf, vg_ui.textbox.len );
 
@@ -1490,7 +1574,8 @@ static void _ui_textbox_change_callback(void){
 }
 
 void ui_start_modal( const char *message, u32 options );
-static void _ui_textbox_clipboard_paste(void){
+static void _ui_textbox_clipboard_paste(void)
+{
    if( !SDL_HasClipboardText() )
       return;
 
@@ -1877,7 +1962,7 @@ int ui_textbox( ui_rect inout_panel, const char *label,
    rect_copy( rect, text_rect );
 
    if( flags & UI_TEXTBOX_MULTILINE ) text_rect[3] = rect[3]-16;
-   else text_rect[3] = vg_ui.font->line_height;
+   else text_rect[3] = vg_ui.font->sy;
 
    text_rect[2] -= 16;
    ui_rect_center( rect, text_rect );
@@ -1885,41 +1970,47 @@ int ui_textbox( ui_rect inout_panel, const char *label,
    ui_px wrap_length = 1024;
 
    if( flags & UI_TEXTBOX_WRAP ) 
-      wrap_length = text_rect[2] / vg_ui.font->spacing;
+      wrap_length = text_rect[2] / vg_ui.font->sx;
 
-   if( hover ){
+   if( hover )
+   {
       vg_ui.cursor = k_ui_cursor_ibeam;
    }
 
-   if( vg_ui.focused_control_id == buf ){
+   if( vg_ui.focused_control_id == buf )
+   {
       ui_fill( rect, col_base );
       ui_ntext( text_rect, buf, wrap_length, 1, k_ui_align_left, 0 );
 
-      if( !(flags & UI_TEXTBOX_AUTOFOCUS) && ((clickup||clickdown) && !target)){
+      if( !(flags & UI_TEXTBOX_AUTOFOCUS) && ((clickup||clickdown) && !target))
+      {
          ui_defocus_all();
       }
-      else{
+      else
+      {
          vg_ui.focused_control_hit = 1;
          if( click && target ){
             int p0[3] ={
-               (vg_ui.mouse_click[0] - text_rect[0]) / vg_ui.font->spacing,
-               (vg_ui.mouse_click[1] - text_rect[1]) / vg_ui.font->line_height,
+               (vg_ui.mouse_click[0] - text_rect[0]) / vg_ui.font->sx,
+               (vg_ui.mouse_click[1] - text_rect[1]) / vg_ui.font->sy,
                -1
             }, 
             p1[3] = {
-               (vg_ui.mouse[0] - text_rect[0]) / vg_ui.font->spacing,
-               (vg_ui.mouse[1] - text_rect[1]) / vg_ui.font->line_height,
+               (vg_ui.mouse[0] - text_rect[0]) / vg_ui.font->sx,
+               (vg_ui.mouse[1] - text_rect[1]) / vg_ui.font->sy,
                -1
             };
 
-            if( flags & UI_TEXTBOX_MULTILINE ){
+            if( flags & UI_TEXTBOX_MULTILINE )
+            {
                _ui_textbox_calc_index_from_grid( p0, wrap_length );
                _ui_textbox_calc_index_from_grid( p1, wrap_length );
 
                vg_ui.textbox.cursor_pos = p0[2];
                vg_ui.textbox.cursor_user = p1[2];
             }
-            else{
+            else
+            {
                int max = strlen( buf );
                vg_ui.textbox.cursor_pos = VG_MAX( 0, VG_MIN( max, p0[0] )),
                vg_ui.textbox.cursor_user = VG_MAX( 0, VG_MIN( max, p1[0] ));
@@ -1936,28 +2027,32 @@ int ui_textbox( ui_rect inout_panel, const char *label,
              end   = VG_MAX( c0, c1 ),
              chars = end-start;
 
-         if( flags & (UI_TEXTBOX_WRAP|UI_TEXTBOX_MULTILINE) ){
+         if( flags & (UI_TEXTBOX_WRAP|UI_TEXTBOX_MULTILINE) )
+         {
             int pos[3], remaining = chars;
 
             pos[2] = start;
             _ui_textbox_index_calc_coords( pos, wrap_length );
 
-            if( start==end ){
-               cursor[0] = text_rect[0] + pos[0]*vg_ui.font->spacing-1;
+            if( start==end )
+            {
+               cursor[0] = text_rect[0] + pos[0]*vg_ui.font->sx-1;
                cursor[1] = text_rect[1] + pos[1]*14;
                cursor[2] = 2;
                cursor[3] = 13;
                ui_fill( cursor, col_cursor );
                rect_copy( cursor, vg_ui.click_fader_end );
             }
-            else{
-               while( remaining ){
+            else
+            {
+               while( remaining )
+               {
                   int run = _ui_textbox_run_remaining( pos, wrap_length );
                       run = VG_MIN( run, remaining );
 
-                  cursor[0] = text_rect[0] + pos[0]*vg_ui.font->spacing-1;
+                  cursor[0] = text_rect[0] + pos[0]*vg_ui.font->sx-1;
                   cursor[1] = text_rect[1] + pos[1]*14;
-                  cursor[2] = (float)(run)*(float)vg_ui.font->spacing;
+                  cursor[2] = (float)(run)*(float)vg_ui.font->sx;
                   cursor[3] = 13;
 
                   ui_fill( cursor, col_cursor );
@@ -1970,20 +2065,24 @@ int ui_textbox( ui_rect inout_panel, const char *label,
                rect_copy( cursor, vg_ui.click_fader_end );
             }
          }
-         else{
-            cursor[0] = text_rect[0] + start*vg_ui.font->spacing-1;
+         else
+         {
+            cursor[0] = text_rect[0] + start*vg_ui.font->sx-1;
             cursor[1] = text_rect[1];
             cursor[3] = 13;
 
-            if( start==end ){
+            if( start==end )
+            {
                cursor[2] = 2;
             }
-            else{
-               cursor[2] = (float)(chars)*(float)vg_ui.font->spacing;
+            else
+            {
+               cursor[2] = (float)(chars)*(float)vg_ui.font->sx;
             }
 
             if( (vg_ui.click_fade_opacity<=0.0f) && 
-                 ui_clip( rect, cursor, cursor ) ){
+                 ui_clip( rect, cursor, cursor ) )
+            {
                ui_fill( cursor, col_cursor );
             }
 
@@ -1994,8 +2093,10 @@ int ui_textbox( ui_rect inout_panel, const char *label,
       return 0;
    }
 
-   if( click || (flags & UI_TEXTBOX_AUTOFOCUS) ){
-      if( (target && hover) || (flags & UI_TEXTBOX_AUTOFOCUS) ){
+   if( click || (flags & UI_TEXTBOX_AUTOFOCUS) )
+   {
+      if( (target && hover) || (flags & UI_TEXTBOX_AUTOFOCUS) )
+      {
          ui_defocus_all();
 
          ui_fill( rect, col_highlight );
@@ -2012,10 +2113,12 @@ int ui_textbox( ui_rect inout_panel, const char *label,
          vg_ui.textbox.cursor_pos = 0;
          vg_ui.textbox.cursor_user = 0;
 
-         if( callbacks ){
+         if( callbacks )
+         {
             vg_ui.textbox.callbacks = *callbacks;
          }
-         else{
+         else
+         {
             vg_ui.textbox.callbacks.change = NULL;
             vg_ui.textbox.callbacks.down = NULL;
             vg_ui.textbox.callbacks.up = NULL;
@@ -2028,7 +2131,8 @@ int ui_textbox( ui_rect inout_panel, const char *label,
 
    ui_fill( rect, col_base );
 
-   if( hover ){
+   if( hover )
+   {
       ui_outline( rect, -1, col_highlight, 0 );
    }
 
@@ -2062,7 +2166,8 @@ void ui_tabs( ui_rect inout_panel, ui_rect out_content_panel,
    ui_rect_pad( out_content_panel, (ui_px[2]){ k_ui_padding, k_ui_padding } );
 
    /* place buttons */
-   for( i32 i=0; i<count; i++ ){
+   for( i32 i=0; i<count; i++ )
+   {
       ui_rect button = {
          bar[0] + ((f32)i*width),
          bar[1],
@@ -2071,7 +2176,8 @@ void ui_tabs( ui_rect inout_panel, ui_rect out_content_panel,
       };
 
       enum ui_scheme_colour colour = k_ui_bg+4;
-      if( i == cur_page ){
+      if( i == cur_page )
+      {
          colour = k_ui_bg+2;
          ui_outline( button, 1, ui_colour( k_ui_bg+5 ), 
                      UI_TOP|UI_LEFT|UI_RIGHT );