From 99fb0374e9352ebb61e7eea134784bd26f61a892 Mon Sep 17 00:00:00 2001 From: spl3g Date: Fri, 10 Oct 2025 22:19:33 +0300 Subject: Add mouse interactions --- src/ui.c | 199 ++++++++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 141 insertions(+), 58 deletions(-) (limited to 'src/ui.c') diff --git a/src/ui.c b/src/ui.c index 7c90099..12888e5 100644 --- a/src/ui.c +++ b/src/ui.c @@ -1,97 +1,180 @@ #include "ui.h" -void draw_white_key(size_t idx, bool pressed) { - Clay_Color fill_color; - Clay_Color border_color; - - if (pressed) { - fill_color = COLOR_BG; - border_color = COLOR_FG; - } else { - fill_color = COLOR_FG; - border_color = COLOR_FG; +void handle_key_press(Clay_ElementId element_id, Clay_PointerData pointer_info, intptr_t user_data) { + UIData *ui_data = (UIData *)user_data; + int idx = element_id.offset; + + bool pressed = ui_data->keys[idx].mouse_pressed; + + if (!pressed && (pointer_info.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME + || pointer_info.state == CLAY_POINTER_DATA_PRESSED)) { + mqueue_push(ui_data->msg_queue, (synth_message){ + .type = MSG_NOTE_ON, + .note = { + .note_id = idx, + }, + }); + ui_data->keys[idx].mouse_pressed = true; + } + + if (pressed && (pointer_info.state == CLAY_POINTER_DATA_RELEASED_THIS_FRAME + || pointer_info.state == CLAY_POINTER_DATA_RELEASED)) { + if (!ui_data->keys[idx].keyboard_pressed) { + mqueue_push(ui_data->msg_queue, (synth_message){ + .type = MSG_NOTE_OFF, + .note = { + .note_id = idx, + }, + }); + } + ui_data->keys[idx].mouse_pressed = false; } - CLAY(CLAY_IDI("white_key", idx), { - .layout = { - .sizing = {CLAY_SIZING_FIXED(40), .height = CLAY_SIZING_FIXED(100)}, - }, - .backgroundColor = fill_color, - .border = { .width = {1, 1, 1, 1, 0}, .color = border_color}, - }); } -void draw_black_key(size_t idx, bool pressed) { - Clay_Color fill_color; - Clay_Color border_color; +void draw_white_key(size_t idx, UIData *ui_data) { + CLAY(CLAY_IDI("key_container", idx)) { + bool mouse_pressed = ui_data->keys[idx].mouse_pressed; + bool keyboard_pressed = ui_data->keys[idx].keyboard_pressed; + bool hovered = Clay_Hovered(); - if (pressed) { - fill_color = COLOR_FG; - border_color = COLOR_BG; - } else { - fill_color = COLOR_BG; - border_color = COLOR_FG; - } - CLAY(CLAY_IDI("black_key", idx), { - .layout = { - .sizing = {CLAY_SIZING_FIXED(25), .height = CLAY_SIZING_FIXED(65)}, - }, - - .floating = { - .attachTo = CLAY_ATTACH_TO_ELEMENT_WITH_ID, - .parentId = CLAY_IDI("white_key", idx - 1).id, - .attachPoints = { - .element = CLAY_ATTACH_POINT_CENTER_TOP, - .parent = CLAY_ATTACH_POINT_RIGHT_TOP, + if (!hovered && mouse_pressed && !keyboard_pressed) { + mqueue_push(ui_data->msg_queue, (synth_message){ + .type = MSG_NOTE_OFF, + .note = { + .note_id = idx, + }, + }); + + mouse_pressed = false; + ui_data->keys[idx].mouse_pressed = false; + } + + Clay_OnHover(handle_key_press, (intptr_t)ui_data); + + + Clay_Color fill_color; + Clay_Color border_color; + + if (mouse_pressed || keyboard_pressed) { + fill_color = COLOR_BG; + border_color = COLOR_FG; + } else if (hovered) { + fill_color = COLOR_FG_INTER; + border_color = COLOR_FG_INTER; + } else { + fill_color = COLOR_FG; + border_color = COLOR_FG; + } + CLAY(CLAY_IDI("white_key", idx), { + .layout = { + .sizing = {CLAY_SIZING_FIXED(40), .height = CLAY_SIZING_FIXED(100)}, }, - .offset = { - .y = -1, + .backgroundColor = fill_color, + .border = { .width = {1, 1, 1, 1, 0}, .color = border_color}, + }); + } +} + +void draw_black_key(size_t idx, UIData *ui_data) { + CLAY(CLAY_IDI("key_container", idx), { + .floating = { + .attachTo = CLAY_ATTACH_TO_ELEMENT_WITH_ID, + .parentId = CLAY_IDI("white_key", idx - 1).id, + .attachPoints = { + .element = CLAY_ATTACH_POINT_CENTER_TOP, + .parent = CLAY_ATTACH_POINT_RIGHT_TOP, + }, + .offset = { + .y = -1, + }, }, - }, + }) { + bool mouse_pressed = ui_data->keys[idx].mouse_pressed; + bool keyboard_pressed = ui_data->keys[idx].keyboard_pressed; + bool hovered = Clay_Hovered(); + + if (!hovered && mouse_pressed && !keyboard_pressed) { + mqueue_push(ui_data->msg_queue, (synth_message){ + .type = MSG_NOTE_OFF, + .note = { + .note_id = idx, + }, + }); + + mouse_pressed = false; + ui_data->keys[idx].mouse_pressed = false; + } - .backgroundColor = fill_color, - .border = { .width = {1, 1, 0, 1, 0}, .color = border_color}, - }); + Clay_OnHover(handle_key_press, (intptr_t)ui_data); + + Clay_Color fill_color; + Clay_Color border_color; + + if (keyboard_pressed || mouse_pressed) { + fill_color = COLOR_FG; + border_color = COLOR_BG; + } else if (hovered) { + fill_color = COLOR_BG_INTER; + border_color = COLOR_FG; + } else { + fill_color = COLOR_BG; + border_color = COLOR_FG; + } + CLAY(CLAY_IDI("black_key", idx), { + .layout = { + .sizing = {CLAY_SIZING_FIXED(25), .height = CLAY_SIZING_FIXED(65)}, + }, + + .backgroundColor = fill_color, + .border = { .width = {1, 1, 0, 1, 0}, .color = border_color}, + }); + } } -void draw_keyboard(bool *pressed_keys, size_t keys_amount) { +void draw_keyboard(UIData *ui_data) { CLAY(CLAY_ID("keyboard"), { .layout = { .layoutDirection = CLAY_LEFT_TO_RIGHT, }, }) { - for (size_t i = 0; i < keys_amount; i++) { - bool pressed = pressed_keys[i]; + for (size_t i = 0; i < ui_data->keys_amount; i++) { size_t key_idx = i % 12; if (key_idx <= 4) { if (i % 2 == 0) { - draw_white_key(i, pressed); + draw_white_key(i, ui_data); } else { - draw_black_key(i, pressed); + draw_black_key(i, ui_data); } } else { if (i % 2 == 0) { - draw_black_key(i, pressed); + draw_black_key(i, ui_data); } else { - draw_white_key(i, pressed); + draw_white_key(i, ui_data); } } } } } -void draw_ui(bool *pressed_keys, size_t keys_amount) { - CLAY(CLAY_ID("OuterContainer"), { +void draw_screen() {} +void draw_nob() {} + +void draw_ui(UIData *ui_data) { + CLAY(CLAY_ID("outer_container"), { .layout = { .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)}, .padding = CLAY_PADDING_ALL(16), .childGap = 16, - .childAlignment = { - .x = CLAY_ALIGN_X_CENTER, - .y = CLAY_ALIGN_Y_CENTER, - }, + .childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER}, }, .backgroundColor = COLOR_BG, }) { - draw_keyboard(pressed_keys, keys_amount); + /* CLAY(CLAY_ID("app_container"), { */ + /* .layout = { */ + /* .sizing = {CLAY_SIZING_PERCENT(0.75), CLAY_SIZING_PERCENT(0.75)} */ + /* }, */ + /* }) { */ + draw_keyboard(ui_data); + /* }; */ }; } -- cgit v1.2.3