added a builtin font because there were too many problems without it
authorBrendan Hansen <brendan.f.hansen@gmail.com>
Thu, 15 Jul 2021 14:03:43 +0000 (09:03 -0500)
committerBrendan Hansen <brendan.f.hansen@gmail.com>
Thu, 15 Jul 2021 14:03:43 +0000 (09:03 -0500)
bin/onyx
modules/js_events/js_events.js
modules/ui/components/button.onyx
modules/ui/components/checkbox.onyx
modules/ui/components/radio.onyx
modules/ui/components/textbox.onyx
modules/ui/font.onyx
modules/ui/fonts/builtin.data [new file with mode: 0644]
modules/ui/fonts/builtin.fnt [new file with mode: 0644]
modules/ui/fonts/builtin.png [new file with mode: 0644]
modules/ui/ui.onyx

index 7a49eae4998e3a32939d933e33ef7fb5e9d51115..fd417834abaebd71bc29bed92520335d68a2a2d1 100755 (executable)
Binary files a/bin/onyx and b/bin/onyx differ
index 8363914596fa0ed0eea3e667e2e4a1ec4e568935..4ef84a11c0e180db98ed536747bd9cb807f6f8d4 100644 (file)
@@ -140,6 +140,7 @@ window.ONYX_MODULES.push({
 
         var path_memory = new Uint8Array(ONYX_MEMORY.buffer, filename_ptr, filename_len);
         var path = new TextDecoder("utf-8").decode(path_memory);
+        console.log(`Requesting file '${path}'`);
 
         fetch(path)
             .then(response => response.arrayBuffer())
index 58e7d3c87dffb49d7682b2fd5663008f02f0153d..5158f990eac386e96a8b2e213ff9ed004a0098e5 100644 (file)
@@ -58,13 +58,14 @@ button :: (use r: Rectangle, text: str, theme := ^default_button_theme, site :=
     surface_color  = color_lerp(animation_state.click_time, surface_color, theme.click_color);
     gfx.rect(.{ x0 + border_width, y0 + border_width }, .{ width - border_width * 2, height - border_width * 2 }, surface_color);
 
+    use_font(theme.font);
     text_width, text_height := current_font->get_dimensions(text, theme.font_size);
 
     @ThemeConfiguration // This always draws the text centered on the button surface.
     draw_text_raw(text,
             x0 + (width - text_width) / 2,
             y0 + current_font->get_baseline(theme.font_size) + (height - text_height) / 2,
-            theme.font_size, theme.text_color);
+            theme.font, theme.font_size, theme.text_color);
 
     move_towards(^animation_state.click_time, 0.0f, theme.click_decay_speed);
 
index 391d3287d681828d502de9eea15241ce44b0b211..2d60b5172d9ca17a784ef2e0c1f68ccbd3d93072 100644 (file)
@@ -83,13 +83,14 @@ checkbox :: (use r: Rectangle, value: ^bool, text: str, theme := ^default_checkb
         surface_color
     );
 
+    use_font(theme.font);
     text_width, text_height := current_font->get_dimensions(text, theme.font_size);
 
     draw_text_raw(
         text,
         x0 + box_size + 4 * 2,   @Cleanup @ThemeConfiguration
         y0 + current_font->get_baseline(theme.font_size) + (height - text_height) / 2,
-        theme.font_size, theme.text_color);
+        theme.font, theme.font_size, theme.text_color);
 
     move_towards(^animation_state.click_time, 0.0f, theme.click_decay_speed);
 
index 01dd7f0b724d3f5161332cdf3873462fef2a3e77..53183b35582482291ac529d342728df434702d92 100644 (file)
@@ -76,13 +76,14 @@ radio :: (use r: Rectangle, selected: ^$T, value: T, text: str, theme := ^defaul
 
     gfx.circle(.{ cx, cy }, radius - theme.radio_border_radius, color=surface_color);
 
+    use_font(theme.font);
     text_width, text_height := current_font->get_dimensions(text, theme.font_size);
 
     draw_text_raw(
         text,
         x0 + 2 * radius + 4, @ThemeConfiguration
         y0 + current_font->get_baseline(theme.font_size) + (height - text_height) / 2,
-        theme.font_size, theme.text_color);
+        theme.font, theme.font_size, theme.text_color);
 
     move_towards(^animation_state.click_time, 0.0f, theme.click_decay_speed);
 
index d9abd64f6f12a07465c354380f5a534a8a74d507..660d60158db7c2c2e4ce099b50fe21af8c7fc887 100644 (file)
@@ -60,6 +60,7 @@ textbox :: (use r: Rectangle, text_buffer: ^string.String_Buffer, placeholder :=
         text_color = theme.placeholder_text_color;
     }
 
+    use_font(theme.font);
     text_width, text_height := current_font->get_dimensions(text, theme.font_size);
 
     text_x := x0 + border_width;
@@ -154,7 +155,7 @@ textbox :: (use r: Rectangle, text_buffer: ^string.String_Buffer, placeholder :=
     surface_color  = color_lerp(animation_state.click_time, surface_color, theme.click_color);
     gfx.rect(.{ x0 + border_width, y0 + border_width }, .{ width - border_width * 2, height - border_width * 2 }, surface_color);
 
-    draw_text_raw(text, text_x, text_y, theme.font_size, text_color);
+    draw_text_raw(text, text_x, text_y, theme.font, theme.font_size, text_color);
 
     if textbox_editing_state.hash == hash {
         cursor_x := get_cursor_location(text_buffer, text_x, text_y, theme.font_size, textbox_editing_state.cursor_position);
index e694997ae8cffc31f3c9bb435572ce1e3af5e1f7..874126e1f4dea0fcc2bd6d12eb2506a6552e8a49 100644 (file)
@@ -69,11 +69,16 @@ create_font :: (bmfont_data: [] u8, font_texture_data: [] u8) -> Font {
     return .{ texture=texture, font=font, rendering_kind=rendering_kind };
 }
 
-@Bug // Why is '#type' needed here?
 Font_Index :: i32;
 
 #private font_registry : map.Map(Font_Index, Font);
 register_font :: (index: Font_Index, font: Font) {
     assert(!map.has(^font_registry, index), "Font with this index already exists.");
     map.put(^font_registry, index, font);
+}
+
+use_font :: (index: Font_Index) {
+    font_ptr := map.get_ptr(^font_registry, index);
+    if font_ptr == null do font_ptr = map.get_ptr(^font_registry, -1);
+    current_font = font_ptr;
 }
\ No newline at end of file
diff --git a/modules/ui/fonts/builtin.data b/modules/ui/fonts/builtin.data
new file mode 100644 (file)
index 0000000..cec8d2b
Binary files /dev/null and b/modules/ui/fonts/builtin.data differ
diff --git a/modules/ui/fonts/builtin.fnt b/modules/ui/fonts/builtin.fnt
new file mode 100644 (file)
index 0000000..f15bf92
--- /dev/null
@@ -0,0 +1,102 @@
+info face="M+ 2m Nerd Font Complete" size=16 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=1,1,1,1 spacing=-2,-2
+common lineHeight=24 base=18 scaleW=128 scaleH=128 pages=1 packed=0
+page id=0 file="builtin.png"
+chars count=97
+char id=0       x=95   y=63   width=7    height=13   xoffset=-1   yoffset=6    xadvance=6    page=0    chnl=0 
+char id=10      x=95   y=63   width=7    height=13   xoffset=-1   yoffset=6    xadvance=6    page=0    chnl=0 
+char id=32      x=0    y=0    width=0    height=0    xoffset=-1   yoffset=17   xadvance=8    page=0    chnl=0 
+char id=33      x=121  y=35   width=5    height=14   xoffset=2    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=34      x=28   y=88   width=6    height=7    xoffset=1    yoffset=4    xadvance=8    page=0    chnl=0 
+char id=35      x=75   y=63   width=9    height=14   xoffset=0    yoffset=5    xadvance=9    page=0    chnl=0 
+char id=36      x=61   y=0    width=9    height=18   xoffset=0    yoffset=2    xadvance=8    page=0    chnl=0 
+char id=37      x=64   y=63   width=11   height=14   xoffset=-1   yoffset=5    xadvance=9    page=0    chnl=0 
+char id=38      x=84   y=63   width=11   height=14   xoffset=-1   yoffset=5    xadvance=9    page=0    chnl=0 
+char id=39      x=40   y=88   width=4    height=7    xoffset=2    yoffset=4    xadvance=8    page=0    chnl=0 
+char id=40      x=12   y=0    width=8    height=18   xoffset=0    yoffset=3    xadvance=8    page=0    chnl=0 
+char id=41      x=20   y=0    width=8    height=18   xoffset=0    yoffset=3    xadvance=8    page=0    chnl=0 
+char id=42      x=10   y=88   width=10   height=9    xoffset=-1   yoffset=4    xadvance=9    page=0    chnl=0 
+char id=43      x=119  y=77   width=8    height=10   xoffset=0    yoffset=8    xadvance=8    page=0    chnl=0 
+char id=44      x=44   y=88   width=6    height=7    xoffset=1    yoffset=14   xadvance=8    page=0    chnl=0 
+char id=45      x=64   y=88   width=7    height=4    xoffset=1    yoffset=11   xadvance=9    page=0    chnl=0 
+char id=46      x=50   y=88   width=5    height=5    xoffset=2    yoffset=14   xadvance=8    page=0    chnl=0 
+char id=47      x=49   y=20   width=10   height=15   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=48      x=38   y=63   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=49      x=83   y=49   width=8    height=14   xoffset=0    yoffset=5    xadvance=9    page=0    chnl=0 
+char id=50      x=91   y=49   width=8    height=14   xoffset=0    yoffset=5    xadvance=7    page=0    chnl=0 
+char id=51      x=99   y=49   width=9    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=52      x=108  y=49   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=53      x=118  y=49   width=9    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=54      x=0    y=63   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=55      x=10   y=63   width=8    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=56      x=18   y=63   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=57      x=28   y=63   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=58      x=114  y=77   width=5    height=11   xoffset=1    yoffset=8    xadvance=7    page=0    chnl=0 
+char id=59      x=58   y=63   width=6    height=14   xoffset=0    yoffset=8    xadvance=7    page=0    chnl=0 
+char id=60      x=102  y=63   width=8    height=13   xoffset=0    yoffset=6    xadvance=8    page=0    chnl=0 
+char id=61      x=20   y=88   width=8    height=8    xoffset=0    yoffset=9    xadvance=8    page=0    chnl=0 
+char id=62      x=110  y=63   width=8    height=13   xoffset=0    yoffset=6    xadvance=8    page=0    chnl=0 
+char id=63      x=48   y=63   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=64      x=80   y=0    width=10   height=16   xoffset=-1   yoffset=6    xadvance=8    page=0    chnl=0 
+char id=65      x=69   y=20   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=66      x=79   y=20   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=67      x=89   y=20   width=9    height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=68      x=98   y=20   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=69      x=108  y=20   width=9    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=70      x=117  y=20   width=9    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=71      x=0    y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=72      x=10   y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=73      x=20   y=35   width=7    height=14   xoffset=0    yoffset=5    xadvance=7    page=0    chnl=0 
+char id=74      x=27   y=35   width=9    height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=75      x=36   y=35   width=9    height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=76      x=45   y=35   width=8    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=77      x=53   y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=78      x=63   y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=79      x=73   y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=80      x=83   y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=81      x=70   y=0    width=10   height=17   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=82      x=93   y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=83      x=103  y=35   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=84      x=113  y=35   width=8    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=85      x=0    y=49   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=86      x=10   y=49   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=87      x=20   y=49   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=88      x=30   y=49   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=89      x=40   y=49   width=10   height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=90      x=50   y=49   width=8    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=91      x=28   y=0    width=7    height=18   xoffset=0    yoffset=4    xadvance=8    page=0    chnl=0 
+char id=92      x=59   y=20   width=10   height=15   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=93      x=35   y=0    width=8    height=18   xoffset=0    yoffset=4    xadvance=8    page=0    chnl=0 
+char id=94      x=0    y=88   width=10   height=10   xoffset=-1   yoffset=4    xadvance=8    page=0    chnl=0 
+char id=95      x=71   y=88   width=10   height=4    xoffset=-1   yoffset=18   xadvance=8    page=0    chnl=0 
+char id=96      x=34   y=88   width=6    height=7    xoffset=1    yoffset=3    xadvance=8    page=0    chnl=0 
+char id=97      x=0    y=77   width=10   height=11   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=98      x=90   y=0    width=10   height=15   xoffset=-1   yoffset=4    xadvance=8    page=0    chnl=0 
+char id=99      x=118  y=63   width=9    height=11   xoffset=0    yoffset=8    xadvance=9    page=0    chnl=0 
+char id=100     x=100  y=0    width=10   height=15   xoffset=-1   yoffset=4    xadvance=8    page=0    chnl=0 
+char id=101     x=10   y=77   width=10   height=11   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=102     x=58   y=49   width=8    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=103     x=110  y=0    width=10   height=15   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=104     x=0    y=20   width=10   height=15   xoffset=-1   yoffset=4    xadvance=8    page=0    chnl=0 
+char id=105     x=120  y=0    width=7    height=15   xoffset=1    yoffset=4    xadvance=8    page=0    chnl=0 
+char id=106     x=5    y=0    width=7    height=19   xoffset=0    yoffset=4    xadvance=8    page=0    chnl=0 
+char id=107     x=10   y=20   width=9    height=15   xoffset=0    yoffset=4    xadvance=9    page=0    chnl=0 
+char id=108     x=66   y=49   width=9    height=14   xoffset=-1   yoffset=5    xadvance=8    page=0    chnl=0 
+char id=109     x=20   y=77   width=11   height=11   xoffset=-1   yoffset=8    xadvance=9    page=0    chnl=0 
+char id=110     x=31   y=77   width=10   height=11   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=111     x=41   y=77   width=10   height=11   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=112     x=19   y=20   width=10   height=15   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=113     x=29   y=20   width=10   height=15   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=114     x=51   y=77   width=8    height=11   xoffset=0    yoffset=8    xadvance=8    page=0    chnl=0 
+char id=115     x=59   y=77   width=9    height=11   xoffset=0    yoffset=8    xadvance=8    page=0    chnl=0 
+char id=116     x=75   y=49   width=8    height=14   xoffset=0    yoffset=5    xadvance=8    page=0    chnl=0 
+char id=117     x=68   y=77   width=9    height=11   xoffset=-1   yoffset=8    xadvance=7    page=0    chnl=0 
+char id=118     x=77   y=77   width=10   height=11   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=119     x=87   y=77   width=10   height=11   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=120     x=97   y=77   width=10   height=11   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=121     x=39   y=20   width=10   height=15   xoffset=-1   yoffset=8    xadvance=8    page=0    chnl=0 
+char id=122     x=107  y=77   width=7    height=11   xoffset=0    yoffset=8    xadvance=7    page=0    chnl=0 
+char id=123     x=43   y=0    width=9    height=18   xoffset=-1   yoffset=4    xadvance=8    page=0    chnl=0 
+char id=124     x=0    y=0    width=5    height=20   xoffset=2    yoffset=3    xadvance=8    page=0    chnl=0 
+char id=125     x=52   y=0    width=9    height=18   xoffset=0    yoffset=4    xadvance=8    page=0    chnl=0 
+char id=126     x=55   y=88   width=9    height=5    xoffset=0    yoffset=11   xadvance=8    page=0    chnl=0 
+kernings count=0
diff --git a/modules/ui/fonts/builtin.png b/modules/ui/fonts/builtin.png
new file mode 100644 (file)
index 0000000..135e650
Binary files /dev/null and b/modules/ui/fonts/builtin.png differ
index 80c22cc31e7c5a99d56a8f37f64af9c1501fe849..0291c785af6defb466b2ecec7f3eb8763a7c6efe 100644 (file)
@@ -12,13 +12,18 @@ UI_Id :: #type u32
 #private active_item : UI_Id = 0
 #private hot_item_was_set := false
 
-#private current_font : Font;
+#private current_font : ^Font;
 
 init_ui :: () {
+    map.init(^font_registry, hash_count=4);
+
     map.init(^animation_states, default=.{}, hash_count=4);
     map.init(^workspace_states, default=.{}, hash_count=4);
 
-    map.init(^font_registry, hash_count=4);
+    // Register a default font so things don't break everywhere
+    builtin_font := create_font(#file_contents "./fonts/builtin.fnt", #file_contents "./fonts/builtin.data");
+    register_font(-1, builtin_font);
+    use_font(-1);
 }
 
 // This function should be called at the end of drawing a frame, after all of the UI elements
@@ -73,7 +78,9 @@ is_hot_item :: (id: UI_Id) -> bool {
 }
 
 @FontSizing // In the new font system, size is in ems, which can be set per font.
-draw_text_raw :: (text: str, x: f32, y: f32, size := DEFAULT_TEXT_SIZE, color := gfx.Color4.{1,1,1}) {
+draw_text_raw :: (text: str, x: f32, y: f32, font: i32 = -1, size := DEFAULT_TEXT_SIZE, color := gfx.Color4.{1,1,1}) {
+    use_font(font);
+    if current_font == null do use_font(-1);
     current_font->render(text, x, y, size, color);
 }
 
@@ -92,7 +99,7 @@ draw_rect :: #match {
 }
 
 draw_text :: (use r: Rectangle, text: str, theme := ^default_text_theme, site := #callsite) -> bool {
-    draw_text_raw(text, x0, y0 + current_font->get_baseline(theme.font_size), theme.font_size, theme.text_color);
+    draw_text_raw(text, x0, y0 + current_font->get_baseline(theme.font_size), theme.font, theme.font_size, theme.text_color);
 }
 
 Rectangle :: struct {