From 223038c9cd8045d22d9e9ac3b1983903a2bbb03c Mon Sep 17 00:00:00 2001
From: Krzosa Karol <krzosa@proton.me>
Date: Wed, 22 Jan 2025 13:11:04 +0100
Subject: [PATCH] wasm, ui, dpi and text baseline

---
 package/index.html              | 12 ++++++------
 src/app/app_wasm.c              |  4 ++--
 src/app/app_wasm.html           | 12 ++++++------
 src/render/render_opengl.c      |  8 ++++----
 src/render/render_wasm_canvas.c | 28 ++++++++++++++++++----------
 src/wasm_app/main.c             | 18 ++++++++----------
 src/wasm_app/wasm_app.gen.c     |  2 ++
 7 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/package/index.html b/package/index.html
index a1194b5..e9e0d69 100644
--- a/package/index.html
+++ b/package/index.html
@@ -13,8 +13,8 @@
 </body>
 <style>
   @font-face {
-    font-family: open_sans_regular;
-    src: url(OpenSans-Regular.ttf);
+    font-family: main_font;
+    src: url(FiraCode-Regular.ttf);
 }
 * {
     margin: 0;
@@ -150,18 +150,18 @@ const ctx2d = canvas.getContext('2d');
         wasm_draw_text: (str, len, x, y, font_str, font_len, font_size, r, g, b, a) => {
             ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
             ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-            ctx2d.textBaseline = "top"
-            ctx2d.fillText(mem.read_cstr(str, len), x, y)
+            ctx2d.textBaseline = "hanging";
+            ctx2d.fillText(mem.read_cstr(str, len), x, y);
         },
         wasm_measure_text: (str, len, font_str, font_len, font_size) => {
             ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
-            ctx2d.textBaseline = "top";
+            ctx2d.textBaseline = "hanging";
             const metrics = ctx2d.measureText(mem.read_cstr(str, len));
             return metrics.width;
         },
         wasm_get_font_height: (font_str, font_len, font_size) => {
             ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
-            ctx2d.textBaseline = "top";
+            ctx2d.textBaseline = "hanging";
             return ctx2d.measureText('NothinBelowTheBaseline').actualBoundingBoxDescent;
         },
         wasm_draw_rect: (x, y, w, h, r, g, b, a) => {
diff --git a/src/app/app_wasm.c b/src/app/app_wasm.c
index 7d3766a..f5b1e8b 100644
--- a/src/app/app_wasm.c
+++ b/src/app/app_wasm.c
@@ -35,6 +35,7 @@ fn void wasm_add_event(app_event_t event) {
 }
 
 fn void wasm_set_cached_mouse(v2f32_t p) {
+    p = v2f32_muls(p, wasm_dpr);
     wasm_cached.mouse_delta = v2f32_sub(p, wasm_cached.mouse_pos);
     wasm_cached.mouse_pos = p;
 }
@@ -94,7 +95,6 @@ fn_wasm_export void wasm_key_down(char *key, b32 ctrl, b32 shift, b32 alt, b32 m
         });
     }
 
-
     if (map.filter_out) {
         return;
     }
@@ -127,7 +127,7 @@ fn_wasm_export b32 wasm_update(f64 time, f32 width, f32 height, f32 dpr) {
     wasm_dpr = dpr;
 
     if (wasm_frame.first_event == NULL) wasm_add_event((app_event_t){.kind = app_event_kind_update});
-    wasm_frame.window_size = (v2f32_t){width / dpr, height / dpr};
+    wasm_frame.window_size = (v2f32_t){width, height};
     wasm_frame.dpr = wasm_dpr;
     wasm_frame.mouse_pos = wasm_frame.last_event->mouse_pos;
     wasm_frame.delta = wasm_delta_time;
diff --git a/src/app/app_wasm.html b/src/app/app_wasm.html
index a1194b5..e9e0d69 100644
--- a/src/app/app_wasm.html
+++ b/src/app/app_wasm.html
@@ -13,8 +13,8 @@
 </body>
 <style>
   @font-face {
-    font-family: open_sans_regular;
-    src: url(OpenSans-Regular.ttf);
+    font-family: main_font;
+    src: url(FiraCode-Regular.ttf);
 }
 * {
     margin: 0;
@@ -150,18 +150,18 @@ const ctx2d = canvas.getContext('2d');
         wasm_draw_text: (str, len, x, y, font_str, font_len, font_size, r, g, b, a) => {
             ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
             ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
-            ctx2d.textBaseline = "top"
-            ctx2d.fillText(mem.read_cstr(str, len), x, y)
+            ctx2d.textBaseline = "hanging";
+            ctx2d.fillText(mem.read_cstr(str, len), x, y);
         },
         wasm_measure_text: (str, len, font_str, font_len, font_size) => {
             ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
-            ctx2d.textBaseline = "top";
+            ctx2d.textBaseline = "hanging";
             const metrics = ctx2d.measureText(mem.read_cstr(str, len));
             return metrics.width;
         },
         wasm_get_font_height: (font_str, font_len, font_size) => {
             ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
-            ctx2d.textBaseline = "top";
+            ctx2d.textBaseline = "hanging";
             return ctx2d.measureText('NothinBelowTheBaseline').actualBoundingBoxDescent;
         },
         wasm_draw_rect: (x, y, w, h, r, g, b, a) => {
diff --git a/src/render/render_opengl.c b/src/render/render_opengl.c
index b97c350..a157deb 100644
--- a/src/render/render_opengl.c
+++ b/src/render/render_opengl.c
@@ -32,14 +32,14 @@ fn void gl_debug_callback(GLenum source, GLenum type, GLuint id, GLenum severity
     }
 }
 
-fn void rn_reload_font(s8_t font_data, f32 font_size) {
+fn void rn_reload_font(f32 font_size, f32 dpr) {
     if (rn_state.main_font->texture_id) {
         glDeleteTextures(1, &rn_state.main_font->texture_id);
     }
 
     ma_temp_t scratch = ma_begin_scratch();
     rn_atlas_t *atlas = rn_create_atlas(scratch.arena, (v2i32_t){2048, 2048});
-    rn_reload_font_atlas(rn_state.main_font, font_data, atlas, (i32)font_size);
+    rn_reload_font_atlas(rn_state.main_font, main_font, atlas, (i32)(font_size * dpr));
 
     GLint filter = GL_NEAREST;
     glCreateTextures(GL_TEXTURE_2D, 1, &atlas->texture_id);
@@ -53,12 +53,12 @@ fn void rn_reload_font(s8_t font_data, f32 font_size) {
     ma_end_scratch(scratch);
 }
 
-fn void rn_init(ma_arena_t *perm, f32 font_size) {
+fn void rn_init(ma_arena_t *perm, f32 font_size, f32 dpr) {
     rn_state.cap = 1024*256;
     rn_state.vertices = ma_push_array(perm, rn_vertex_t, rn_state.cap);
 
     rn_state.main_font = rn_create_font(perm);
-    rn_reload_font(main_font, font_size);
+    rn_reload_font(font_size, dpr);
 
     glDebugMessageCallback(&gl_debug_callback, NULL);
     glEnable(GL_DEBUG_OUTPUT_SYNCHRONOUS);
diff --git a/src/render/render_wasm_canvas.c b/src/render/render_wasm_canvas.c
index 3170fb5..b8680fa 100644
--- a/src/render/render_wasm_canvas.c
+++ b/src/render/render_wasm_canvas.c
@@ -5,7 +5,7 @@ fn_wasm_import f32  wasm_measure_text(isize str, i32 len, isize font_str, i32 fo
 fn_wasm_import f32  wasm_get_font_height(isize font_str, i32 font_len, i32 font_size);
 fn_wasm_import void wasm_set_clip(f32 x, f32 y, f32 w, f32 h);
 
-gb_read_only s8_t font_face = s8_const_lit("consolas");
+gb_read_only s8_t font_face = s8_const_lit("main_font");
 
 typedef struct rn_font_t rn_font_t;
 struct rn_font_t {
@@ -19,29 +19,37 @@ struct rn_state_t {
 };
 rn_state_t rn_state;
 
-// fn f64 get_font_height(void) {
-//     return wasm_get_font_height((isize) font_face.str, font_face.len, m*wasm_dpr) / wasm_dpr;
-// }
+fn void rn_reload_font(f32 font_size, f32 dpr) {
+    rn_state.main_font->size = font_size * dpr;
+}
 
-fn void rn_init(ma_arena_t *perm, f32 font_size) {
+fn void rn_init(ma_arena_t *perm, f32 font_size, f32 dpr) {
     rn_state.main_font = ma_push_type(perm, rn_font_t);
-    rn_state.main_font->size = font_size;
+    rn_reload_font(font_size, dpr);
 }
 
 fn void rn_draw_rect(r2f32_t rect, v4f32_t color) {
-    wasm_draw_rect(wasm_dpr * rect.min.x, wasm_dpr * rect.min.y, wasm_dpr * (rect.max.x - rect.min.x), wasm_dpr * (rect.max.y - rect.min.y), color.r * 255.f, color.g * 255.f, color.b * 255.f, color.a);
+    wasm_draw_rect(rect.min.x, rect.min.y, (rect.max.x - rect.min.x), (rect.max.y - rect.min.y), color.r * 255.f, color.g * 255.f, color.b * 255.f, color.a);
 }
 
 fn void rn_draw_rect_border(r2f32_t rect, v4f32_t color, f32 border_thickness) {
+    r2f32_t left = r2f32_cut_left(&rect, border_thickness);
+    r2f32_t right = r2f32_cut_right(&rect, border_thickness);
+    r2f32_t top = r2f32_cut_top(&rect, border_thickness);
+    r2f32_t bottom = r2f32_cut_bottom(&rect, border_thickness);
+    rn_draw_rect(left, color);
+    rn_draw_rect(right, color);
+    rn_draw_rect(top, color);
+    rn_draw_rect(bottom, color);
 }
 
 fn v2f32_t rn_measure_string(rn_font_t *font, s8_t string) {
-    f32 x = wasm_measure_text((isize)string.str, string.len, (isize) font_face.str, font_face.len, rn_state.main_font->size) / wasm_dpr;
+    f32 x = wasm_measure_text((isize)string.str, string.len, (isize) font_face.str, font_face.len, rn_state.main_font->size);
     return (v2f32_t){x, rn_state.main_font->size};
 }
 
 fn v2f32_t rn_draw_string(rn_font_t *font, v2f32_t pos, v4f32_t color, s8_t string) {
-    wasm_draw_text((isize)string.str, string.len, wasm_dpr * pos.x, wasm_dpr * pos.y, (isize) font_face.str, font_face.len, rn_state.main_font->size, color.r * 255.f, color.g * 255.f, color.b * 255.f, color.a);
+    wasm_draw_text((isize)string.str, string.len, pos.x, pos.y, (isize) font_face.str, font_face.len, rn_state.main_font->size, color.r * 255.f, color.g * 255.f, color.b * 255.f, color.a);
     v2f32_t size = rn_measure_string(font, string);
     return size;
 }
@@ -52,7 +60,7 @@ fn v2f32_t rn_draw_stringf(rn_font_t *font, v2f32_t pos, v4f32_t color, char *st
 }
 
 fn void rn_set_clip(r2f32_t rect) {
-    wasm_set_clip(wasm_dpr * rect.min.x, wasm_dpr * rect.min.y, wasm_dpr * (rect.max.x - rect.min.x), wasm_dpr * (rect.max.y - rect.min.y));
+    wasm_set_clip(rect.min.x, rect.min.y, (rect.max.x - rect.min.x), (rect.max.y - rect.min.y));
 }
 
 fn void rn_begin(app_frame_t *frame) {
diff --git a/src/wasm_app/main.c b/src/wasm_app/main.c
index 6cbfe9a..ef7bdb1 100644
--- a/src/wasm_app/main.c
+++ b/src/wasm_app/main.c
@@ -14,23 +14,21 @@
 fn void app_init(f32 dpr) {
     ma_arena_t *perm = &tcx._perm;
     unused(perm);
-    // mt_embed_file(font_data, "package/FiraCode-Regular.ttf");
     mt_tweak_f32(font_size, 50, 4, 200);
-    // mt_tweak_f32(_font_size, 50, 50, 50);
+    mt_tweak_f32(_font_size, 50, 50, 50);
 
-    rn_init(perm, font_size * dpr);
+    rn_init(perm, font_size, dpr);
     ui_demo_init(perm);
 }
 
 fn b32 app_update(app_frame_t *frame) {
-    // if (!f32_are_equal(font_size, _font_size)) {
-    //     _font_size = font_size;
-        // rn_reload_font(font_data, font_size);
-    // }
-    // @todo
+    if (!f32_are_equal(font_size, _font_size)) {
+        _font_size = font_size;
+        rn_reload_font(font_size, frame->dpr);
+    }
     ui_demo_update(frame);
-    v2f32_t size = rn_measure_string(rn_state.main_font, s8_lit("Memes and other things"));
-    debugf("font size = %f %f", size.x, size.y);
+    // v2f32_t size = rn_measure_string(rn_state.main_font, s8_lit("Memes and other things"));
+    // debugf("font size = %f %f", size.x, size.y);
 
     return true;
 }
diff --git a/src/wasm_app/wasm_app.gen.c b/src/wasm_app/wasm_app.gen.c
index 8c72d2f..12b1107 100644
--- a/src/wasm_app/wasm_app.gen.c
+++ b/src/wasm_app/wasm_app.gen.c
@@ -1,6 +1,8 @@
 // automatically generated using: C:\dev\wasm\src/wasm_app/wasm_app.meta.c
 gb f32 font_size = 50;
+gb f32 _font_size = 50;
 gb_read_only mt_tweak_t tweak_table[] = {
 {type(f32), s8_const_lit("font_size"), &font_size, 4, 200},
+{type(f32), s8_const_lit("_font_size"), &_font_size, 50, 50},
 
 };