krzosa/wasm_transcript_browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wasm, ui, dpi and text baseline

Browse Source
This commit is contained in:
Krzosa Karol
2025-01-22 13:11:04 +01:00
parent e54265fcac
commit 223038c9cd
7 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package/index.html
View File

@@ -13,8 +13,8 @@
</body> </body>
<style> <style>
@font-face { @font-face {
font-family: open_sans_regular; font-family: main_font;
src: url(OpenSans-Regular.ttf); src: url(FiraCode-Regular.ttf);
} }
* { * {
margin: 0; 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) => { 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.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`; ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
ctx2d.textBaseline = "top" ctx2d.textBaseline = "hanging";
ctx2d.fillText(mem.read_cstr(str, len), x, y) ctx2d.fillText(mem.read_cstr(str, len), x, y);
}, },
wasm_measure_text: (str, len, font_str, font_len, font_size) => { wasm_measure_text: (str, len, font_str, font_len, font_size) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`; 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)); const metrics = ctx2d.measureText(mem.read_cstr(str, len));
return metrics.width; return metrics.width;
}, },
wasm_get_font_height: (font_str, font_len, font_size) => { wasm_get_font_height: (font_str, font_len, font_size) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`; ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.textBaseline = "top"; ctx2d.textBaseline = "hanging";
return ctx2d.measureText('NothinBelowTheBaseline').actualBoundingBoxDescent; return ctx2d.measureText('NothinBelowTheBaseline').actualBoundingBoxDescent;
}, },
wasm_draw_rect: (x, y, w, h, r, g, b, a) => { wasm_draw_rect: (x, y, w, h, r, g, b, a) => {

4
src/app/app_wasm.c
View File

@@ -35,6 +35,7 @@ fn void wasm_add_event(app_event_t event) {
} }
fn void wasm_set_cached_mouse(v2f32_t p) { 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_delta = v2f32_sub(p, wasm_cached.mouse_pos);
wasm_cached.mouse_pos = p; 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) { if (map.filter_out) {
return; return;
} }
@@ -127,7 +127,7 @@ fn_wasm_export b32 wasm_update(f64 time, f32 width, f32 height, f32 dpr) {
wasm_dpr = dpr; wasm_dpr = dpr;
if (wasm_frame.first_event == NULL) wasm_add_event((app_event_t){.kind = app_event_kind_update}); 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.dpr = wasm_dpr;
wasm_frame.mouse_pos = wasm_frame.last_event->mouse_pos; wasm_frame.mouse_pos = wasm_frame.last_event->mouse_pos;
wasm_frame.delta = wasm_delta_time; wasm_frame.delta = wasm_delta_time;

12
src/app/app_wasm.html
View File

@@ -13,8 +13,8 @@
</body> </body>
<style> <style>
@font-face { @font-face {
font-family: open_sans_regular; font-family: main_font;
src: url(OpenSans-Regular.ttf); src: url(FiraCode-Regular.ttf);
} }
* { * {
margin: 0; 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) => { 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.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`; ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
ctx2d.textBaseline = "top" ctx2d.textBaseline = "hanging";
ctx2d.fillText(mem.read_cstr(str, len), x, y) ctx2d.fillText(mem.read_cstr(str, len), x, y);
}, },
wasm_measure_text: (str, len, font_str, font_len, font_size) => { wasm_measure_text: (str, len, font_str, font_len, font_size) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`; 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)); const metrics = ctx2d.measureText(mem.read_cstr(str, len));
return metrics.width; return metrics.width;
}, },
wasm_get_font_height: (font_str, font_len, font_size) => { wasm_get_font_height: (font_str, font_len, font_size) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`; ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.textBaseline = "top"; ctx2d.textBaseline = "hanging";
return ctx2d.measureText('NothinBelowTheBaseline').actualBoundingBoxDescent; return ctx2d.measureText('NothinBelowTheBaseline').actualBoundingBoxDescent;
}, },
wasm_draw_rect: (x, y, w, h, r, g, b, a) => { wasm_draw_rect: (x, y, w, h, r, g, b, a) => {

8
src/render/render_opengl.c
View File

@@ -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) { if (rn_state.main_font->texture_id) {
glDeleteTextures(1, &rn_state.main_font->texture_id); glDeleteTextures(1, &rn_state.main_font->texture_id);
} }
ma_temp_t scratch = ma_begin_scratch(); ma_temp_t scratch = ma_begin_scratch();
rn_atlas_t *atlas = rn_create_atlas(scratch.arena, (v2i32_t){2048, 2048}); 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; GLint filter = GL_NEAREST;
glCreateTextures(GL_TEXTURE_2D, 1, &atlas->texture_id); 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); 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.cap = 1024*256;
rn_state.vertices = ma_push_array(perm, rn_vertex_t, rn_state.cap); rn_state.vertices = ma_push_array(perm, rn_vertex_t, rn_state.cap);
rn_state.main_font = rn_create_font(perm); 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); glDebugMessageCallback(&gl_debug_callback, NULL);
glEnable(GL_DEBUG_OUTPUT_SYNCHRONOUS); glEnable(GL_DEBUG_OUTPUT_SYNCHRONOUS);

28
src/render/render_wasm_canvas.c
View File

@@ -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 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); 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; typedef struct rn_font_t rn_font_t;
struct rn_font_t { struct rn_font_t {
@@ -19,29 +19,37 @@ struct rn_state_t {
}; };
rn_state_t rn_state; rn_state_t rn_state;
// fn f64 get_font_height(void) { fn void rn_reload_font(f32 font_size, f32 dpr) {
// return wasm_get_font_height((isize) font_face.str, font_face.len, m*wasm_dpr) / wasm_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 = 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) { 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) { 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) { 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}; 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) { 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); v2f32_t size = rn_measure_string(font, string);
return size; 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) { 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) { fn void rn_begin(app_frame_t *frame) {

18
src/wasm_app/main.c
View File

@@ -14,23 +14,21 @@
fn void app_init(f32 dpr) { fn void app_init(f32 dpr) {
ma_arena_t *perm = &tcx._perm; ma_arena_t *perm = &tcx._perm;
unused(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, 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); ui_demo_init(perm);
} }
fn b32 app_update(app_frame_t *frame) { fn b32 app_update(app_frame_t *frame) {
// if (!f32_are_equal(font_size, _font_size)) { if (!f32_are_equal(font_size, _font_size)) {
// _font_size = font_size; _font_size = font_size;
// rn_reload_font(font_data, font_size); rn_reload_font(font_size, frame->dpr);
// } }
// @todo
ui_demo_update(frame); ui_demo_update(frame);
v2f32_t size = rn_measure_string(rn_state.main_font, s8_lit("Memes and other things")); // 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); // debugf("font size = %f %f", size.x, size.y);
return true; return true;
} }

2
src/wasm_app/wasm_app.gen.c
View File

@@ -1,6 +1,8 @@
// automatically generated using: C:\dev\wasm\src/wasm_app/wasm_app.meta.c // automatically generated using: C:\dev\wasm\src/wasm_app/wasm_app.meta.c
gb f32 font_size = 50; gb f32 font_size = 50;
gb f32 _font_size = 50;
gb_read_only mt_tweak_t tweak_table[] = { 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, 4, 200},
{type(f32), s8_const_lit("_font_size"), &_font_size, 50, 50},
}; };