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

wasm app, revive ui

Browse Source
This commit is contained in:
krzosa
2024-12-31 09:57:41 +01:00
parent 574c265073
commit 0950667bc8
10 changed files with 105 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.gen.c
View File

@@ -259,6 +259,7 @@ type_t type__app_event_t = { type_kind_struct, s8_const_lit("app_event_t"), size
{.name = s8_const_lit("mouse_button"), .type = &type__app_mouse_button_t, .offset = offsetof(app_event_t, mouse_button)},
{.name = s8_const_lit("key"), .type = &type__app_key_t, .offset = offsetof(app_event_t, key)},
{.name = s8_const_lit("text"), .type = &type__s8_t, .offset = offsetof(app_event_t, text)},
{.name = s8_const_lit("mouse_wheel_delta"), .type = &type__v3f64_t, .offset = offsetof(app_event_t, mouse_wheel_delta)},
{.name = s8_const_lit("ctrl"), .type = &type__b8, .offset = offsetof(app_event_t, ctrl)},
{.name = s8_const_lit("shift"), .type = &type__b8, .offset = offsetof(app_event_t, shift)},
{.name = s8_const_lit("alt"), .type = &type__b8, .offset = offsetof(app_event_t, alt)},
@@ -266,9 +267,8 @@ type_t type__app_event_t = { type_kind_struct, s8_const_lit("app_event_t"), size
{.name = s8_const_lit("time"), .type = &type__f64, .offset = offsetof(app_event_t, time)},
{.name = s8_const_lit("delta_time"), .type = &type__f64, .offset = offsetof(app_event_t, delta_time)},
{.name = s8_const_lit("dpr"), .type = &type__f64, .offset = offsetof(app_event_t, dpr)},
{.name = s8_const_lit("window_size"), .type = &type__v2f32_t, .offset = offsetof(app_event_t, window_size)},
{.name = s8_const_lit("mouse_pos"), .type = &type__v2f32_t, .offset = offsetof(app_event_t, mouse_pos)},
{.name = s8_const_lit("mouse_wheel_delta"), .type = &type__v3f32_t, .offset = offsetof(app_event_t, mouse_wheel_delta)},
{.name = s8_const_lit("window_size"), .type = &type__v2f64_t, .offset = offsetof(app_event_t, window_size)},
{.name = s8_const_lit("mouse_pos"), .type = &type__v2f64_t, .offset = offsetof(app_event_t, mouse_pos)},
},
.count = 14,
};

6
src/app/app.gen.h
View File

@@ -97,6 +97,7 @@ struct app_event_t {
app_mouse_button_t mouse_button;
app_key_t key;
s8_t text;
v3f64_t mouse_wheel_delta;
b8 ctrl;
b8 shift;
b8 alt;
@@ -104,7 +105,6 @@ struct app_event_t {
f64 time;
f64 delta_time;
f64 dpr;
v2f32_t window_size;
v2f32_t mouse_pos;
v3f32_t mouse_wheel_delta;
v2f64_t window_size;
v2f64_t mouse_pos;
};

9
src/app/app.meta.c
View File

@@ -161,9 +161,13 @@ void meta_app(ma_arena_t *arena) {
struct app_event_t {
app_event_kind_t kind;
// data present only during events
app_mouse_button_t mouse_button;
app_key_t key;
s8_t text;
v3f64_t mouse_wheel_delta;
// always present data
b8 ctrl;
b8 shift;
b8 alt;
@@ -173,9 +177,8 @@ void meta_app(ma_arena_t *arena) {
f64 delta_time;
f64 dpr;
v2f32_t window_size;
v2f32_t mouse_pos;
v3f32_t mouse_wheel_delta;
v2f64_t window_size;
v2f64_t mouse_pos;
};
));

51
src/app/app_wasm.c
View File

@@ -1,4 +1,4 @@
fn_wasm_import void wasm_clear();
fn_wasm_import void wasm_clear(void);
fn_wasm_import void wasm_draw_text(isize str, i32 len, f64 x, f64 y, isize font_str, i32 font_len, i32 font_size, f32 r, f32 g, f32 b, f32 a);
fn_wasm_import void wasm_draw_rect(f64 x, f64 y, f64 w, f64 h, f32 r, f32 g, f32 b, f32 a);
fn_wasm_import f64 wasm_measure_text(isize str, i32 len, isize font_str, i32 font_len, i32 font_size);
@@ -10,14 +10,19 @@ glb_wasm_export i32 wasm_temp_buff1_len = 127;
glb_wasm_export char wasm_temp_buff2[128] = {[127] = 0x13};
glb_wasm_export i32 wasm_temp_buff2_len = 127;
glb char *font_face = "fira";
glb i32 font_face_len = 4;
glb s8_t font_face = s8_const_lit("open_sans_regular");
glb f64 wasm_dpr;
glb ma_arena_t *wasm_input_text_arena;
glb STACK(app_event_t, 64) wasm_events;
glb b32 wasm_event_failed_to_queue;
glb f64 wasm_last_time = 0;
typedef struct wasm_cached_t wasm_cached_t;
struct wasm_cached_t {
v2f64_t mouse_pos;
b8 ctrl, alt, meta, shift;
} wasm_cached;
fn void app_update(app_event_t *events, i32 event_count);
fn void set_clip(r2f64_t rect) {
@@ -25,11 +30,11 @@ fn void set_clip(r2f64_t rect) {
}
fn f64 get_font_height(void) {
return wasm_get_font_height((isize) font_face, font_face_len, 20*wasm_dpr) / wasm_dpr;
return wasm_get_font_height((isize) font_face.str, font_face.len, 20*wasm_dpr) / wasm_dpr;
}
fn f64 measure_text_ex(char *str, i32 len) {
return wasm_measure_text((isize)str, len, (isize) font_face, font_face_len, 20*wasm_dpr) / wasm_dpr;
return wasm_measure_text((isize)str, len, (isize) font_face.str, font_face.len, 20*wasm_dpr) / wasm_dpr;
}
fn f64 measure_text(char *str) {
@@ -37,7 +42,7 @@ fn f64 measure_text(char *str) {
}
fn void draw_text(v2f64_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, font_face_len, 20*wasm_dpr, color.r * 255.f, color.g * 255.f, color.b * 255.f, color.a);
wasm_draw_text((isize)string.str, string.len, wasm_dpr * pos.x, wasm_dpr * pos.y, (isize) font_face.str, font_face.len, 20*wasm_dpr, color.r * 255.f, color.g * 255.f, color.b * 255.f, color.a);
}
fn void draw_textf(v2f64_t pos, char *str, ...) {
@@ -47,7 +52,7 @@ fn void draw_textf(v2f64_t pos, char *str, ...) {
i32 len = stbsp_vsnprintf(buff, sizeof(buff), str, args);
va_end(args);
wasm_draw_text((isize)buff, len, wasm_dpr * pos.x, wasm_dpr * pos.y, (isize) font_face, font_face_len, 20*wasm_dpr, 0, 0, 0, 1);
wasm_draw_text((isize)buff, len, wasm_dpr * pos.x, wasm_dpr * pos.y, (isize) font_face.str, font_face.len, 20*wasm_dpr, 0, 0, 0, 1);
}
fn void draw_rect(r2f64_t rect, v4f32_t color) {
@@ -64,6 +69,8 @@ fn void wasm_add_event(app_event_t event) {
}
fn_wasm_export void wasm_mouse_move(f64 x, f64 y, b32 ctrl, b32 shift, b32 alt, b32 meta) {
wasm_cached.mouse_pos = (v2f64_t){x, y};
wasm_cached.ctrl = ctrl; wasm_cached.alt = alt; wasm_cached.meta = meta; wasm_cached.shift = shift;
wasm_add_event((app_event_t){
.kind = app_event_kind_mouse_move,
.mouse_pos = {x, y},
@@ -77,6 +84,8 @@ fn_wasm_export void wasm_mouse_move(f64 x, f64 y, b32 ctrl, b32 shift, b32 alt,
fn_wasm_export void wasm_mouse_down(f64 x, f64 y, i32 button, b32 ctrl, b32 shift, b32 alt, b32 meta) {
button += 1;
assert(button >= app_mouse_button_left && button <= app_mouse_button_right);
wasm_cached.ctrl = ctrl; wasm_cached.alt = alt; wasm_cached.meta = meta; wasm_cached.shift = shift;
wasm_cached.mouse_pos = (v2f64_t){x, y};
wasm_add_event((app_event_t){
.kind = app_event_kind_mouse_down,
.mouse_pos = {x, y},
@@ -91,6 +100,8 @@ fn_wasm_export void wasm_mouse_down(f64 x, f64 y, i32 button, b32 ctrl, b32 shif
fn_wasm_export void wasm_mouse_up(f64 x, f64 y, i32 button, b32 ctrl, b32 shift, b32 alt, b32 meta) {
button += 1;
assert(button >= app_mouse_button_left && button <= app_mouse_button_right);
wasm_cached.ctrl = ctrl; wasm_cached.alt = alt; wasm_cached.meta = meta; wasm_cached.shift = shift;
wasm_cached.mouse_pos = (v2f64_t){x, y};
wasm_add_event((app_event_t){
.kind = app_event_kind_mouse_up,
.mouse_pos = {x, y},
@@ -102,10 +113,13 @@ fn_wasm_export void wasm_mouse_up(f64 x, f64 y, i32 button, b32 ctrl, b32 shift,
});
}
fn_wasm_export void wasm_mouse_wheel(f64 delta_x, f64 delta_y, f64 delta_z, b32 ctrl, b32 shift, b32 alt, b32 meta) {
fn_wasm_export void wasm_mouse_wheel(f64 x, f64 y, f64 delta_x, f64 delta_y, f64 delta_z, b32 ctrl, b32 shift, b32 alt, b32 meta) {
wasm_cached.mouse_pos = (v2f64_t){x, y};
wasm_cached.ctrl = ctrl; wasm_cached.alt = alt; wasm_cached.meta = meta; wasm_cached.shift = shift;
wasm_add_event((app_event_t){
.kind = app_event_kind_mouse_wheel,
.mouse_wheel_delta = {delta_x, delta_y, delta_z},
.mouse_pos = {x, y},
.ctrl = ctrl,
.shift = shift,
.alt = alt,
@@ -114,14 +128,15 @@ fn_wasm_export void wasm_mouse_wheel(f64 delta_x, f64 delta_y, f64 delta_z, b32
}
fn_wasm_export void wasm_key_down(char *key, b32 ctrl, b32 shift, b32 alt, b32 meta) {
wasm_cached.ctrl = ctrl; wasm_cached.alt = alt; wasm_cached.meta = meta; wasm_cached.shift = shift;
assert(wasm_temp_buff1[127] == 0x13); // make sure we didn't overwrite memory in JS
assert(wasm_temp_buff2[127] == 0x13);
s8_t key8 = s8_from_char(key);
wasm_key_map_t map = wasm_map_key_string_to_app_key(key8);
if (map.key != app_key_null) {
wasm_add_event((app_event_t){
.kind = app_event_kind_key_down,
.mouse_pos = wasm_cached.mouse_pos,
.key = map.key,
.ctrl = ctrl,
.shift = shift,
@@ -138,6 +153,7 @@ fn_wasm_export void wasm_key_down(char *key, b32 ctrl, b32 shift, b32 alt, b32 m
s8_t text = s8_copy(wasm_input_text_arena, key8);
wasm_add_event((app_event_t){
.kind = app_event_kind_text,
.mouse_pos = wasm_cached.mouse_pos,
.text = text,
.ctrl = ctrl,
.shift = shift,
@@ -147,6 +163,7 @@ fn_wasm_export void wasm_key_down(char *key, b32 ctrl, b32 shift, b32 alt, b32 m
}
fn_wasm_export void wasm_key_up(char *key, b32 ctrl, b32 shift, b32 alt, b32 meta) {
wasm_cached.ctrl = ctrl; wasm_cached.alt = alt; wasm_cached.meta = meta; wasm_cached.shift = shift;
assert(wasm_temp_buff1[127] == 0x13); // make sure we didn't overwrite memory in JS
assert(wasm_temp_buff2[127] == 0x13);
s8_t key8 = s8_from_char(key);
@@ -155,6 +172,7 @@ fn_wasm_export void wasm_key_up(char *key, b32 ctrl, b32 shift, b32 alt, b32 met
if (map.key != app_key_null) {
wasm_add_event((app_event_t){
.kind = app_event_kind_key_up,
.mouse_pos = wasm_cached.mouse_pos,
.key = map.key,
.ctrl = ctrl,
.shift = shift,
@@ -166,7 +184,20 @@ fn_wasm_export void wasm_key_up(char *key, b32 ctrl, b32 shift, b32 alt, b32 met
fn_wasm_export void wasm_update(f64 time, f64 width, f64 height, f64 dpr) {
f64 delta_time = (time - wasm_last_time);
v2f32_t window_size = (v2f32_t){width / dpr, height / dpr};
v2f64_t window_size = (v2f64_t){width / dpr, height / dpr};
if (wasm_events.len == 0) {
wasm_add_event((app_event_t){
.kind = app_event_kind_update,
.mouse_pos = wasm_cached.mouse_pos,
.alt = wasm_cached.alt,
.ctrl = wasm_cached.ctrl,
.meta = wasm_cached.meta,
.shift = wasm_cached.shift,
});
}
for (i32 i = 0; i < wasm_events.len; i += 1) {
wasm_events.data[i].dpr = dpr;
wasm_events.data[i].window_size = window_size;

10
src/wasm_app/main.c
View File

@@ -3,13 +3,20 @@
#include "app/app.h"
#include "app/app.c"
// #include "debug.c"
// #include "ui2.c"
#include "ui2.c"
f64 delta_time;
void app_update(app_event_t *events, i32 event_count) {
if (event_count) delta_time = events[0].delta_time;
draw_textf(v2f64(0,0), "delta time: %f", delta_time);
for (i32 i = 0; i < event_count; i += 1) {
ui_demo(events + i);
}
#if 0
ma_scratch_scope(temp) {
f64 offset = get_font_height() + 8;
f64 pos = offset;
@@ -24,5 +31,6 @@ void app_update(app_event_t *events, i32 event_count) {
}
}
}
#endif
}

120
src/wasm_app/ui2.c
View File

@@ -18,20 +18,20 @@ struct ui_signal_t {
b8 overlapping;
};
ui_signal_t ui_interact(r2f64_t rect) {
ui_signal_t ui_interact(app_event_t *ev, r2f64_t rect) {
ui_signal_t sig = {0};
if (r2f64_contains(rect, mouse_pos_g)) {
if (r2f64_contains(rect, ev->mouse_pos)) {
sig.overlapping = true;
if (mouse_button_press_g[app_mouse_button_left]) {
if (ev->kind == app_event_kind_mouse_down && ev->mouse_button == app_mouse_button_left) {
sig.pressed = true;
}
}
return sig;
}
b32 ui_button(r2f64_t rect, char *title) {
b32 ui_button(app_event_t *ev, r2f64_t rect, char *title) {
v2f64_t text_pos = ui_calc_text_pos(rect, title);
ui_signal_t sig = ui_interact(rect);
ui_signal_t sig = ui_interact(ev, rect);
v4f32_t rect_color = secondary_color_global;
v4f32_t text_color = black_color_global;
@@ -39,17 +39,17 @@ b32 ui_button(r2f64_t rect, char *title) {
rect_color = primary_color_global;
}
clip(rect);
set_clip(rect);
draw_rect(rect, rect_color);
draw_text(text_pos, text_color, title, str_len(title));
clip(r2f64(-1000, -1000, 1000000, 1000000));
draw_text(text_pos, text_color, s8_from_char(title));
set_clip(r2f64(-1000, -1000, 1000000, 1000000));
return sig.pressed;
}
b32 ui_checkbox(r2f64_t rect, b32 *value, char *title) {
b32 ui_checkbox(app_event_t *ev, r2f64_t rect, b32 *value, char *title) {
v2f64_t text_pos = ui_calc_text_pos(rect, title);
ui_signal_t sig = ui_interact(rect);
ui_signal_t sig = ui_interact(ev, rect);
if (sig.pressed) *value = !*value;
v4f32_t rect_color = secondary_color_global;
@@ -61,10 +61,10 @@ b32 ui_checkbox(r2f64_t rect, b32 *value, char *title) {
rect_color = v4f32_lerp(rect_color, accent2_color_global, 0.5);
}
clip(rect);
set_clip(rect);
draw_rect(rect, rect_color);
draw_text(text_pos, text_color, title, str_len(title));
clip(r2f64(-1000, -1000, 1000000, 1000000));
draw_text(text_pos, text_color, s8_from_char(title));
set_clip(r2f64(-1000, -1000, 1000000, 1000000));
return *value;
}
@@ -84,21 +84,21 @@ ui_id_t ui_string_to_id(const char *string, i32 len) { // FNV HASH (1a?)
#define ui_location_id() ui_string_to_id(FILE_AND_LINE, sizeof(FILE_AND_LINE) - 1)
ui_id_t ui_active_element = {0};
void ui_slider(r2f64_t rect, ui_id_t id, f64 *value, char *title) {
void ui_slider(app_event_t *ev, r2f64_t rect, ui_id_t id, f64 *value, char *title) {
v2f64_t text_pos = ui_calc_text_pos(rect, title);
ui_signal_t sig = ui_interact(rect);
ui_signal_t sig = ui_interact(ev, rect);
b32 interacting = false;
{
if (sig.pressed) {
ui_active_element = id;
}
if (id.value == ui_active_element.value && mouse_button_down_g[app_mouse_button_left]) {
if (id.value == ui_active_element.value) {
interacting = true;
}
}
if (interacting) {
f64 mouse_pos = mouse_pos_g.x;
f64 mouse_pos = ev->mouse_pos.x;
v2f64_t rect_size = r2f64_get_size(rect);
*value = (mouse_pos - rect.min.x) / rect_size.x;
*value = CLAMP(*value, 0, 1.0);
@@ -113,62 +113,19 @@ void ui_slider(r2f64_t rect, ui_id_t id, f64 *value, char *title) {
if (sig.overlapping) slider_color = v4f32_lerp(slider_color, accent2_color_global, 0.2);
v4f32_t text_color = black_color_global;
clip(rect);
set_clip(rect);
draw_rect(rect, rect_color);
draw_rect(slider_rect, slider_color);
draw_text(text_pos, text_color, title, str_len(title));
clip(r2f64(-1000, -1000, 1000000, 1000000));
draw_text(text_pos, text_color, s8_from_char(title));
set_clip(r2f64(-1000, -1000, 1000000, 1000000));
}
typedef struct ui_input_state ui_input_state;
struct ui_input_state {
char *buff;
int len;
int cap;
int cursor;
};
void ui_input_text(r2f64_t rect, ui_input_state *in) {
v2f64_t tp = ui_calc_text_pos(rect, "a");
v2f64_t text_pos = {rect.min.x, tp.y};
ui_signal_t sig = ui_interact(rect);
v4f32_t rect_color = secondary_color_global;
if (r2f64_contains(rect, mouse_pos_g)) {
if (key_press_g == app_key_right) in->cursor += 1;
if (key_press_g == app_key_left) in->cursor -= 1;
if (key_press_g == app_key_backspace) {
debugf("a");
}
in->cursor = CLAMP(in->cursor, 0, in->len);
if (sig.overlapping) rect_color = v4f32_lerp(rect_color, accent2_color_global, 0.2);
}
clip(rect);
draw_rect(rect, rect_color);
draw_text(text_pos, black_color_global, in->buff, in->len);
clip(r2f64(-1000, -1000, 1000000, 1000000));
f64 cx = measure_text_ex(in->buff, in->cursor);
v2f64_t cursor_pos = {text_pos.x + cx, text_pos.y};
draw_rect(r2f64_center_halfdim(cursor_pos, v2f64(1, 6)), black_color_global);
}
void ui_demo(void) {
if (mouse_button_release_g[app_mouse_button_left]) {
void ui_demo(app_event_t *ev) {
if (ev->kind == app_event_kind_mouse_up) {
ui_active_element = (ui_id_t){0};
}
r2f64_t window_rect = (r2f64_t){(v2f64_t){0}, window_size_g};
r2f64_t window_rect = (r2f64_t){(v2f64_t){0}, ev->window_size};
r2f64_t top_bar_rect = r2f64_cut_top(&window_rect, get_font_height() + 20);
draw_rect(window_rect, primary_color_global);
@@ -183,7 +140,7 @@ void ui_demo(void) {
if (open_file_panel) title = "▼ file";
open_file_panel_xsize = measure_text(title) + padding*2;
r2f64_t rect = r2f64_cut_left(&top_bar_rect, open_file_panel_xsize);
if (ui_checkbox(rect, &open_file_panel, title)) {
if (ui_checkbox(ev, rect, &open_file_panel, title)) {
}
r2f64_t gap_rect = r2f64_cut_left(&top_bar_rect, 1);
draw_rect(gap_rect, black_color_global);
@@ -200,27 +157,27 @@ void ui_demo(void) {
char buff[64];
stbsp_snprintf(buff, sizeof(buff), "%f", slider_value);
r2f64_t rect = r2f64_cut_top(&panel_rect, item_size);
ui_slider(rect, ui_location_id(), &slider_value, buff);
ui_slider(ev, rect, ui_location_id(), &slider_value, buff);
}
{
static char buff[64];
static ui_input_state input;
if (input.buff == NULL) {
input.buff = buff;
input.cap = sizeof(buff);
}
// {
// static char buff[64];
// static ui_input_state input;
// if (input.buff == NULL) {
// input.buff = buff;
// input.cap = sizeof(buff);
// }
r2f64_t rect = r2f64_cut_top(&panel_rect, item_size);
ui_input_text(rect, &input);
}
// r2f64_t rect = r2f64_cut_top(&panel_rect, item_size);
// ui_input_text(rect, &input);
// }
}
{
char *title = "edit";
r2f64_t rect = r2f64_cut_left(&top_bar_rect, measure_text(title) + padding*2);
if (ui_button(rect, title)) {
if (ui_button(ev, rect, title)) {
}
r2f64_t gap_rect = r2f64_cut_left(&top_bar_rect, 1);
draw_rect(gap_rect, black_color_global);
@@ -229,13 +186,10 @@ void ui_demo(void) {
{
char *title = "view";
r2f64_t rect = r2f64_cut_left(&top_bar_rect, measure_text(title) + padding*2);
if (ui_button(rect, title)) {
if (ui_button(ev, rect, title)) {
}
r2f64_t gap_rect = r2f64_cut_left(&top_bar_rect, 1);
draw_rect(gap_rect, black_color_global);
}
if (input_text_len_g) {
debugf("%.*s", input_text_len_g, input_text_g);
}
}