Refactor UI code into an immediate mode style #1

Merged
abdelrahman merged 10 commits from immediate-mode-ui into main 2024-01-20 22:22:17 +00:00
9 changed files with 247 additions and 175 deletions

View File

@ -1,16 +0,0 @@
#ifndef BUTTON_H
#define BUTTON_H
#include "window.h"
#define BUTTON_WIDTH 100
#define BUTTON_HEIGHT 40
typedef struct button button_t;
struct button {
rect_t rect;
};
void draw_button(const window_t *wnd, const button_t *button);
#endif // !BUTTON_H

View File

@ -2,18 +2,11 @@
#define NODES_H
#include "aliases/aliases.h"
#include "ui.h"
#include "window.h"
#define MAX_NODES 1024
#define NODE_WIDTH 70
#define NODE_HEIGHT 20
#define IO_NODE_FILL_COLOUR ((colour_t){.abgr = 0xff2c84b7})
#define IO_NODE_BORDER_COLOUR ((colour_t){.abgr = 0xff315c89})
#define OP_NODE_FILL_COLOUR ((colour_t){.abgr = 0xffad6c3a})
#define OP_NODE_BORDER_COLOUR ((colour_t){.abgr = 0xff8e4a33})
typedef i32 (*node_func_t)(i32 a, i32 b);
typedef enum node_type node_type_t;
typedef union node_data node_data_t;
@ -33,10 +26,9 @@ union node_data {
struct node {
rect_t rect;
ui_elem_colours_t colours;
node_type_t type;
node_data_t data;
};
void draw_node(const window_t *wnd, const node_t *node);
#endif // !NODES_H

View File

@ -1,10 +1,63 @@
#ifndef UI_H
#define UI_H
#include "SDL_events.h"
#include "aliases/aliases.h"
#include "window.h"
#include <stdbool.h>
bool aabb(const rect_t *rect, i32 x, i32 y);
#define MAX_UI_ELEMENTS 4096
#define BUTTON_WIDTH 100
#define BUTTON_HEIGHT 40
#define NODE_WIDTH 70
#define NODE_HEIGHT 20
typedef enum ui_elem_type ui_elem_type_t;
typedef struct ui_elem ui_elem_t;
typedef struct ui_ctx ui_ctx_t;
enum ui_elem_type {
UI_ELEM_NODE,
UI_ELEM_BUTTON,
COUNT_UI_ELEM,
};
struct ui_elem {
u64 id;
rect_t rect;
ui_elem_type_t type;
};
typedef struct ui_elem_colours ui_elem_colours_t;
struct ui_elem_colours {
colour_t fill;
colour_t border;
};
struct ui_ctx {
u64 count;
i64 hovered;
i64 active;
i32 mouse_x;
i32 mouse_y;
i32 rel_x;
i32 rel_y;
bool mouse_down;
bool mouse_up;
const window_t *wnd;
ui_elem_t elements[MAX_UI_ELEMENTS];
};
void init_ui_ctx(ui_ctx_t *ctx);
void reset_ui_ctx(ui_ctx_t *ctx);
void handle_ui_events(const window_t *wnd, ui_ctx_t *ctx,
const SDL_Event *event);
bool button(const window_t *wnd, ui_ctx_t *ctx, rect_t rect,
ui_elem_colours_t colours);
rect_t node(const window_t *wnd, ui_ctx_t *ctx, rect_t rect,
ui_elem_colours_t colours);
#endif // !UI_H

View File

@ -63,7 +63,7 @@ void draw_point(const window_t *wnd, point_t p, colour_t colour);
void draw_line(const window_t *wnd, const line_t *ln, colour_t colour);
void draw_triangle(const window_t *wnd, const triangle_t *triangle,
colour_t colour);
void draw_rect(const window_t *wnd, const rect_t *rect, colour_t colour);
void fill_rect(const window_t *wnd, const rect_t *rect, colour_t colour);
void draw_rect(const window_t *wnd, rect_t rect, colour_t colour);
void fill_rect(const window_t *wnd, rect_t rect, colour_t colour);
#endif // !WINDOW_H

View File

@ -1,10 +0,0 @@
#include "button.h"
#include "window.h"
#define BUTTON_FILL_COLOUR ((colour_t){.abgr = 0xff89a83c})
#define BUTTON_BORDER_COLOUR ((colour_t){.abgr = 0xff768432})
void draw_button(const window_t *wnd, const button_t *button) {
fill_rect(wnd, &(button->rect), BUTTON_FILL_COLOUR);
draw_rect(wnd, &(button->rect), BUTTON_BORDER_COLOUR);
}

View File

@ -1,5 +1,4 @@
#include "aliases/aliases.h"
#include "button.h"
#include "nodes.h"
#include "ops.h"
#include "ui.h"
@ -19,23 +18,18 @@
typedef struct compositor compositor_t;
struct compositor {
window_t windows[MAX_WINDOWS];
u32 active_window;
SDL_Event event;
bool running;
u64 mouse_x;
u64 mouse_y;
u64 last_clicked_mouse_x;
u64 last_clicked_mouse_y;
i64 node_hovered;
u64 count;
node_t *nodes;
bool move_node;
button_t buttons[COUNT_COMP_OPS];
i64 button_hovered;
i64 button_clicked;
ui_ctx_t ctx;
};
void add_node(compositor_t *comp, node_type_t type, node_data_t data, i32 x,
i32 y);
i32 y, ui_elem_colours_t colours);
i32 run_main_loop(void) {
if (SDL_Init(SDL_INIT_EVERYTHING) != 0) {
@ -43,6 +37,9 @@ i32 run_main_loop(void) {
}
compositor_t comp = {0};
init_ui_ctx(&(comp.ctx));
comp.nodes = (node_t *)malloc(sizeof(node_t) * MAX_NODES);
window_t *main_window = &(comp.windows[0]);
@ -64,19 +61,26 @@ i32 run_main_loop(void) {
SDL_EventState(SDL_DROPFILE, SDL_ENABLE);
colour_t bg_colour = {.abgr = 0xffffffff};
ui_elem_colours_t button_colours = (ui_elem_colours_t){
.fill = (colour_t){.abgr = 0xff89a83c},
.border = (colour_t){.abgr = 0xff768432},
};
ui_elem_colours_t io_node_colours = (ui_elem_colours_t){
.fill = (colour_t){.abgr = 0xff2c84b7},
.border = (colour_t){.abgr = 0xff315c89},
};
ui_elem_colours_t op_node_colours = (ui_elem_colours_t){
.fill = (colour_t){.abgr = 0xffad6c3a},
.border = (colour_t){.abgr = 0xff8e4a33},
};
i32 button_x = (toolbox->width - BUTTON_WIDTH) / 2;
for (u64 i = 0; i < COUNT_COMP_OPS; ++i) {
comp.buttons[i] = (button_t){.rect = (rect_t){
.topleft.x = button_x,
.topleft.y = i * (BUTTON_HEIGHT + 20) + 30,
.w = BUTTON_WIDTH,
.h = BUTTON_HEIGHT,
}};
}
i32 toolbox_button_x = (toolbox->width - BUTTON_WIDTH) / 2;
while (comp.running) {
while (SDL_PollEvent(&(comp.event))) {
handle_ui_events(&(comp.windows[comp.active_window - 1]), &(comp.ctx),
&(comp.event));
switch (comp.event.type) {
case SDL_QUIT:
comp.running = false;
@ -94,6 +98,7 @@ i32 run_main_loop(void) {
window_t *window = &(comp.windows[i]);
if (id == window->id) {
comp.active_window = id;
wnd = window;
break;
}
@ -110,84 +115,12 @@ i32 run_main_loop(void) {
}
break;
case SDL_MOUSEBUTTONDOWN:
if (comp.event.button.windowID == main_window->id) {
if (comp.node_hovered != -1) {
comp.move_node = true;
}
comp.last_clicked_mouse_x = comp.event.button.x;
comp.last_clicked_mouse_y = comp.event.button.y;
break;
} else if (comp.event.button.windowID == toolbox->id) {
if (comp.button_hovered != -1) {
comp.button_clicked = comp.button_hovered;
}
break;
}
case SDL_MOUSEBUTTONUP:
comp.move_node = false;
if (comp.event.button.windowID == toolbox->id) {
if (comp.button_hovered >= 0 &&
comp.button_hovered == comp.button_clicked) {
add_node(&comp, NODE_TYPE_OP,
(node_data_t){.func = ops[comp.button_hovered]},
comp.last_clicked_mouse_x, comp.last_clicked_mouse_y);
}
comp.button_clicked = -1;
}
break;
case SDL_MOUSEMOTION:
comp.button_hovered = -1;
if (comp.event.motion.windowID == main_window->id) {
comp.mouse_x = comp.event.motion.x;
comp.mouse_y = comp.event.motion.y;
if (comp.move_node) {
i32 dx = comp.event.motion.xrel;
i32 dy = comp.event.motion.yrel;
node_t *node = &(comp.nodes[comp.node_hovered]);
node->rect.topleft.x += dx;
node->rect.topleft.y += dy;
} else {
comp.node_hovered = -1;
for (u64 i = comp.count - 1; i >= 0; --i) {
rect_t *rect = &(comp.nodes[i].rect);
if (aabb(rect, comp.mouse_x, comp.mouse_y)) {
comp.node_hovered = i;
break;
}
}
}
break;
} else if (comp.event.motion.windowID == toolbox->id) {
for (u64 i = COUNT_COMP_OPS - 1; i >= 0; --i) {
rect_t *rect = &(comp.buttons[i].rect);
if (aabb(rect, comp.event.motion.x, comp.event.motion.y)) {
comp.button_hovered = i;
break;
}
}
break;
}
case SDL_DROPFILE:
if (comp.event.drop.windowID == main_window->id) {
node_data_t data = (node_data_t){.path = comp.event.drop.file};
add_node(&comp, NODE_TYPE_IO, data, comp.mouse_x, comp.mouse_y);
add_node(&comp, NODE_TYPE_IO, data, comp.ctx.mouse_x,
comp.ctx.mouse_y, io_node_colours);
break;
}
@ -198,23 +131,37 @@ i32 run_main_loop(void) {
clear_window(&(comp.windows[i]), bg_colour);
}
for (u64 i = 0; i < comp.count; ++i) {
node_t *node = &(comp.nodes[i]);
draw_node(main_window, node);
for (u64 i = 0; i < COUNT_COMP_OPS; ++i) {
rect_t rect = {
.topleft.x = toolbox_button_x,
.topleft.y = i * (BUTTON_HEIGHT + 20) + 30,
.w = BUTTON_WIDTH,
.h = BUTTON_HEIGHT,
};
if (button(toolbox, &(comp.ctx), rect, button_colours)) {
node_data_t data = (node_data_t){.func = ops[i]};
add_node(&comp, NODE_TYPE_OP, data, comp.ctx.mouse_x, comp.ctx.mouse_y,
op_node_colours);
}
}
for (u64 i = 0; i < COUNT_COMP_OPS; ++i) {
button_t *button = &(comp.buttons[i]);
draw_button(toolbox, button);
for (u64 i = 0; i < comp.count; ++i) {
comp.nodes[i].rect = node(main_window, &(comp.ctx), comp.nodes[i].rect,
comp.nodes[i].colours);
}
for (u64 i = 0; i < MAX_WINDOWS; ++i) {
swap_buffers(&(comp.windows[i]));
}
reset_ui_ctx(&(comp.ctx));
}
cleanup_window(toolbox);
cleanup_window(main_window);
for (u64 i = 0; i < MAX_WINDOWS; ++i) {
cleanup_window(&(comp.windows[i]));
}
SDL_Quit();
@ -222,7 +169,7 @@ i32 run_main_loop(void) {
}
void add_node(compositor_t *comp, node_type_t type, node_data_t data, i32 x,
i32 y) {
i32 y, ui_elem_colours_t colours) {
if (comp->count + 1 >= MAX_NODES) {
return;
}
@ -235,6 +182,7 @@ void add_node(compositor_t *comp, node_type_t type, node_data_t data, i32 x,
.w = NODE_WIDTH,
.h = NODE_HEIGHT,
},
.colours = colours,
.type = type,
.data.path = data.path,
};

View File

@ -1,28 +0,0 @@
#include "nodes.h"
#include "aliases/aliases.h"
#include "window.h"
#include <stdbool.h>
typedef struct node_colours node_colours_t;
struct node_colours {
colour_t fill;
colour_t border;
};
INTERNAL node_colours_t colours[COUNT_NODE_TYPES] = {
[NODE_TYPE_IO] =
(node_colours_t){
.fill = IO_NODE_FILL_COLOUR,
.border = IO_NODE_BORDER_COLOUR,
},
[NODE_TYPE_OP] =
(node_colours_t){
.fill = OP_NODE_FILL_COLOUR,
.border = OP_NODE_BORDER_COLOUR,
},
};
void draw_node(const window_t *wnd, const node_t *node) {
fill_rect(wnd, &(node->rect), colours[node->type].fill);
draw_rect(wnd, &(node->rect), colours[node->type].border);
}

139
src/ui.c
View File

@ -1,6 +1,139 @@
#include "ui.h"
#include "SDL_events.h"
#include "aliases/aliases.h"
#include "window.h"
bool aabb(const rect_t *rect, i32 x, i32 y) {
return x > rect->topleft.x && x <= rect->topleft.x + rect->w &&
y > rect->topleft.y && y <= rect->topleft.y + rect->h;
bool aabb(const ui_elem_t *elem, i32 x, i32 y) {
return x > elem->rect.topleft.x && x <= elem->rect.topleft.x + elem->rect.w &&
y > elem->rect.topleft.y && y <= elem->rect.topleft.y + elem->rect.h;
}
void init_ui_ctx(ui_ctx_t *ctx) {
*ctx = (ui_ctx_t){0};
ctx->hovered = -1;
ctx->active = -1;
}
void reset_ui_ctx(ui_ctx_t *ctx) {
ctx->count = 0;
ctx->mouse_down = false;
ctx->mouse_up = false;
}
void handle_ui_events(const window_t *wnd, ui_ctx_t *ctx,
const SDL_Event *event) {
switch (event->type) {
case SDL_MOUSEMOTION:
if (wnd->id == event->motion.windowID) {
ctx->mouse_x = event->motion.x;
ctx->mouse_y = event->motion.y;
ctx->wnd = wnd;
break;
}
case SDL_MOUSEBUTTONDOWN:
if (wnd->id == event->button.windowID) {
ctx->mouse_x = event->button.x;
ctx->mouse_y = event->button.y;
ctx->mouse_down = true;
ctx->wnd = wnd;
}
break;
case SDL_MOUSEBUTTONUP:
if (wnd->id == event->button.windowID) {
ctx->mouse_x = event->button.x;
ctx->mouse_y = event->button.y;
ctx->mouse_up = true;
ctx->wnd = wnd;
}
break;
}
}
bool button(const window_t *wnd, ui_ctx_t *ctx, rect_t rect,
ui_elem_colours_t colours) {
if (ctx->count + 1 >= MAX_UI_ELEMENTS) {
return false;
}
ui_elem_t elem = (ui_elem_t){
.id = (ctx->count)++,
.rect = rect,
.type = UI_ELEM_BUTTON,
};
fill_rect(wnd, rect, colours.fill);
draw_rect(wnd, rect, colours.border);
if (wnd != ctx->wnd || (ctx->active >= 0 && ctx->active != elem.id)) {
return false;
}
if (!aabb(&elem, ctx->mouse_x, ctx->mouse_y)) {
return false;
}
ctx->hovered = elem.id;
if (ctx->mouse_down) {
ctx->active = elem.id;
}
if (ctx->mouse_up && ctx->hovered == elem.id && ctx->active == elem.id) {
ctx->hovered = ctx->active = -1;
return true;
}
return false;
}
rect_t node(const window_t *wnd, ui_ctx_t *ctx, rect_t rect,
ui_elem_colours_t colours) {
if (ctx->count + 1 >= MAX_UI_ELEMENTS) {
return (rect_t){0};
}
ui_elem_t elem = (ui_elem_t){
.id = (ctx->count)++,
.rect = rect,
.type = UI_ELEM_NODE,
};
fill_rect(wnd, rect, colours.fill);
draw_rect(wnd, rect, colours.border);
if (wnd != ctx->wnd || (ctx->active >= 0 && ctx->active != elem.id)) {
return rect;
}
if (ctx->mouse_up) {
ctx->hovered = ctx->active = -1;
ctx->rel_x = ctx->rel_y = 0;
return rect;
}
if (ctx->hovered == elem.id && ctx->active == elem.id) {
return (rect_t){
.topleft.x = ctx->mouse_x + ctx->rel_x,
.topleft.y = ctx->mouse_y + ctx->rel_y,
.w = rect.w,
.h = rect.h,
};
}
if (!aabb(&elem, ctx->mouse_x, ctx->mouse_y)) {
return rect;
}
ctx->hovered = elem.id;
if (ctx->mouse_down) {
ctx->active = elem.id;
ctx->rel_x = rect.topleft.x - ctx->mouse_x;
ctx->rel_y = rect.topleft.y - ctx->mouse_y;
}
return rect;
}

View File

@ -90,18 +90,18 @@ void draw_triangle(const window_t *wnd, const triangle_t *triangle,
draw_line(wnd, &ln2, colour);
}
void draw_rect(const window_t *wnd, const rect_t *rect, colour_t colour) {
void draw_rect(const window_t *wnd, rect_t rect, colour_t colour) {
set_colour(wnd, colour);
SDL_Rect dst = {rect->topleft.x, rect->topleft.y, rect->w, rect->h};
SDL_Rect dst = {rect.topleft.x, rect.topleft.y, rect.w, rect.h};
SDL_RenderDrawRect(wnd->renderer, &dst);
}
void fill_rect(const window_t *wnd, const rect_t *rect, colour_t colour) {
void fill_rect(const window_t *wnd, rect_t rect, colour_t colour) {
set_colour(wnd, colour);
SDL_Rect dst = {rect->topleft.x, rect->topleft.y, rect->w, rect->h};
SDL_Rect dst = {rect.topleft.x, rect.topleft.y, rect.w, rect.h};
SDL_RenderFillRect(wnd->renderer, &dst);
}