2817 lines
71 KiB
C
2817 lines
71 KiB
C
/************************************************************//**
|
|
*
|
|
* @file: ui.c
|
|
* @author: Martin Fouilleul
|
|
* @date: 08/08/2022
|
|
* @revision:
|
|
*
|
|
*****************************************************************/
|
|
#include"platform.h"
|
|
#include"platform_assert.h"
|
|
#include"memory.h"
|
|
#include"hash.h"
|
|
#include"platform_clock.h"
|
|
#include"ui.h"
|
|
|
|
static ui_style UI_STYLE_DEFAULTS =
|
|
{
|
|
.size.width = {.kind = UI_SIZE_CHILDREN,
|
|
.value = 0,
|
|
.relax = 0},
|
|
.size.height = {.kind = UI_SIZE_CHILDREN,
|
|
.value = 0,
|
|
.relax = 0},
|
|
|
|
.layout = {.axis = UI_AXIS_Y,
|
|
.align = {UI_ALIGN_START,
|
|
UI_ALIGN_START}},
|
|
.color = {0, 0, 0, 1},
|
|
.fontSize = 16,
|
|
};
|
|
|
|
mp_thread_local ui_context __uiThreadContext = {0};
|
|
mp_thread_local ui_context* __uiCurrentContext = 0;
|
|
|
|
ui_context* ui_get_context(void)
|
|
{
|
|
return(__uiCurrentContext);
|
|
}
|
|
|
|
void ui_set_context(ui_context* context)
|
|
{
|
|
__uiCurrentContext = context;
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// stacks
|
|
//-----------------------------------------------------------------------------
|
|
ui_stack_elt* ui_stack_push(ui_context* ui, ui_stack_elt** stack)
|
|
{
|
|
ui_stack_elt* elt = mem_arena_alloc_type(&ui->frameArena, ui_stack_elt);
|
|
memset(elt, 0, sizeof(ui_stack_elt));
|
|
elt->parent = *stack;
|
|
*stack = elt;
|
|
return(elt);
|
|
}
|
|
|
|
void ui_stack_pop(ui_stack_elt** stack)
|
|
{
|
|
if(*stack)
|
|
{
|
|
*stack = (*stack)->parent;
|
|
}
|
|
else
|
|
{
|
|
log_error("ui stack underflow\n");
|
|
}
|
|
}
|
|
|
|
mp_rect ui_intersect_rects(mp_rect lhs, mp_rect rhs)
|
|
{
|
|
//NOTE(martin): intersect with current clip
|
|
f32 x0 = maximum(lhs.x, rhs.x);
|
|
f32 y0 = maximum(lhs.y, rhs.y);
|
|
f32 x1 = minimum(lhs.x + lhs.w, rhs.x + rhs.w);
|
|
f32 y1 = minimum(lhs.y + lhs.h, rhs.y + rhs.h);
|
|
mp_rect r = {x0, y0, maximum(0, x1-x0), maximum(0, y1-y0)};
|
|
return(r);
|
|
}
|
|
|
|
mp_rect ui_clip_top(void)
|
|
{
|
|
mp_rect r = {-FLT_MAX/2, -FLT_MAX/2, FLT_MAX, FLT_MAX};
|
|
ui_context* ui = ui_get_context();
|
|
ui_stack_elt* elt = ui->clipStack;
|
|
if(elt)
|
|
{
|
|
r = elt->clip;
|
|
}
|
|
return(r);
|
|
}
|
|
|
|
void ui_clip_push(mp_rect clip)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
mp_rect current = ui_clip_top();
|
|
ui_stack_elt* elt = ui_stack_push(ui, &ui->clipStack);
|
|
elt->clip = ui_intersect_rects(current, clip);
|
|
}
|
|
|
|
void ui_clip_pop(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_stack_pop(&ui->clipStack);
|
|
}
|
|
|
|
ui_box* ui_box_top(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_stack_elt* elt = ui->boxStack;
|
|
ui_box* box = elt ? elt->box : 0;
|
|
return(box);
|
|
}
|
|
|
|
void ui_box_push(ui_box* box)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_stack_elt* elt = ui_stack_push(ui, &ui->boxStack);
|
|
elt->box = box;
|
|
if(box->flags & UI_FLAG_CLIP)
|
|
{
|
|
ui_clip_push(box->rect);
|
|
}
|
|
}
|
|
|
|
void ui_box_pop(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_box* box = ui_box_top();
|
|
if(box)
|
|
{
|
|
if(box->flags & UI_FLAG_CLIP)
|
|
{
|
|
ui_clip_pop();
|
|
}
|
|
ui_stack_pop(&ui->boxStack);
|
|
}
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// tagging
|
|
//-----------------------------------------------------------------------------
|
|
|
|
ui_tag ui_tag_make_str8(str8 string)
|
|
{
|
|
ui_tag tag = {.hash = mp_hash_aes_string(string)};
|
|
return(tag);
|
|
}
|
|
|
|
void ui_tag_box_str8(ui_box* box, str8 string)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_tag_elt* elt = mem_arena_alloc_type(&ui->frameArena, ui_tag_elt);
|
|
elt->tag = ui_tag_make_str8(string);
|
|
list_append(&box->tags, &elt->listElt);
|
|
}
|
|
|
|
void ui_tag_next_str8(str8 string)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_tag_elt* elt = mem_arena_alloc_type(&ui->frameArena, ui_tag_elt);
|
|
elt->tag = ui_tag_make_str8(string);
|
|
list_append(&ui->nextBoxTags, &elt->listElt);
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// key hashing and caching
|
|
//-----------------------------------------------------------------------------
|
|
ui_key ui_key_make_str8(str8 string)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
u64 seed = 0;
|
|
ui_box* parent = ui_box_top();
|
|
if(parent)
|
|
{
|
|
seed = parent->key.hash;
|
|
}
|
|
|
|
ui_key key = {0};
|
|
key.hash = mp_hash_aes_string_seed(string, seed);
|
|
return(key);
|
|
}
|
|
|
|
ui_key ui_key_make_path(str8_list path)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
u64 seed = 0;
|
|
ui_box* parent = ui_box_top();
|
|
if(parent)
|
|
{
|
|
seed = parent->key.hash;
|
|
}
|
|
for_list(&path.list, elt, str8_elt, listElt)
|
|
{
|
|
seed = mp_hash_aes_string_seed(elt->string, seed);
|
|
}
|
|
ui_key key = {seed};
|
|
return(key);
|
|
}
|
|
|
|
bool ui_key_equal(ui_key a, ui_key b)
|
|
{
|
|
return(a.hash == b.hash);
|
|
}
|
|
|
|
void ui_box_cache(ui_context* ui, ui_box* box)
|
|
{
|
|
u64 index = box->key.hash & (UI_BOX_MAP_BUCKET_COUNT-1);
|
|
list_append(&(ui->boxMap[index]), &box->bucketElt);
|
|
}
|
|
|
|
ui_box* ui_box_lookup_key(ui_key key)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
u64 index = key.hash & (UI_BOX_MAP_BUCKET_COUNT-1);
|
|
|
|
for_list(&ui->boxMap[index], box, ui_box, bucketElt)
|
|
{
|
|
if(ui_key_equal(key, box->key))
|
|
{
|
|
return(box);
|
|
}
|
|
}
|
|
return(0);
|
|
}
|
|
|
|
ui_box* ui_box_lookup_str8(str8 string)
|
|
{
|
|
ui_key key = ui_key_make_str8(string);
|
|
return(ui_box_lookup_key(key));
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// styling
|
|
//-----------------------------------------------------------------------------
|
|
|
|
void ui_pattern_push(mem_arena* arena, ui_pattern* pattern, ui_selector selector)
|
|
{
|
|
ui_selector* copy = mem_arena_alloc_type(arena, ui_selector);
|
|
*copy = selector;
|
|
list_append(&pattern->l, ©->listElt);
|
|
}
|
|
|
|
ui_pattern ui_pattern_all(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_pattern pattern = {0};
|
|
ui_pattern_push(&ui->frameArena, &pattern, (ui_selector){.kind = UI_SEL_ANY});
|
|
return(pattern);
|
|
}
|
|
|
|
ui_pattern ui_pattern_owner(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_pattern pattern = {0};
|
|
ui_pattern_push(&ui->frameArena, &pattern, (ui_selector){.kind = UI_SEL_OWNER});
|
|
return(pattern);
|
|
}
|
|
|
|
void ui_style_match_before(ui_pattern pattern, ui_style* style, ui_style_mask mask)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
if(ui)
|
|
{
|
|
ui_style_rule* rule = mem_arena_alloc_type(&ui->frameArena, ui_style_rule);
|
|
rule->pattern = pattern;
|
|
rule->mask = mask;
|
|
rule->style = mem_arena_alloc_type(&ui->frameArena, ui_style);
|
|
*rule->style = *style;
|
|
|
|
list_append(&ui->nextBoxBeforeRules, &rule->boxElt);
|
|
}
|
|
}
|
|
|
|
void ui_style_match_after(ui_pattern pattern, ui_style* style, ui_style_mask mask)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
if(ui)
|
|
{
|
|
ui_style_rule* rule = mem_arena_alloc_type(&ui->frameArena, ui_style_rule);
|
|
rule->pattern = pattern;
|
|
rule->mask = mask;
|
|
rule->style = mem_arena_alloc_type(&ui->frameArena, ui_style);
|
|
*rule->style = *style;
|
|
|
|
list_append(&ui->nextBoxAfterRules, &rule->boxElt);
|
|
}
|
|
}
|
|
|
|
void ui_style_next(ui_style* style, ui_style_mask mask)
|
|
{
|
|
ui_style_match_before(ui_pattern_owner(), style, mask);
|
|
}
|
|
|
|
void ui_style_box_before(ui_box* box, ui_pattern pattern, ui_style* style, ui_style_mask mask)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
if(ui)
|
|
{
|
|
ui_style_rule* rule = mem_arena_alloc_type(&ui->frameArena, ui_style_rule);
|
|
rule->pattern = pattern;
|
|
rule->mask = mask;
|
|
rule->style = mem_arena_alloc_type(&ui->frameArena, ui_style);
|
|
*rule->style = *style;
|
|
|
|
list_append(&box->beforeRules, &rule->boxElt);
|
|
rule->owner = box;
|
|
}
|
|
}
|
|
|
|
void ui_style_box_after(ui_box* box, ui_pattern pattern, ui_style* style, ui_style_mask mask)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
if(ui)
|
|
{
|
|
ui_style_rule* rule = mem_arena_alloc_type(&ui->frameArena, ui_style_rule);
|
|
rule->pattern = pattern;
|
|
rule->mask = mask;
|
|
rule->style = mem_arena_alloc_type(&ui->frameArena, ui_style);
|
|
*rule->style = *style;
|
|
|
|
list_append(&box->afterRules, &rule->boxElt);
|
|
rule->owner = box;
|
|
}
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// input
|
|
//-----------------------------------------------------------------------------
|
|
|
|
void ui_process_event(mp_event* event)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
mp_input_process_event(&ui->input, event);
|
|
}
|
|
|
|
vec2 ui_mouse_position(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
vec2 mousePos = mp_mouse_position(&ui->input);
|
|
return(mousePos);
|
|
}
|
|
|
|
vec2 ui_mouse_delta(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
vec2 delta = mp_mouse_delta(&ui->input);
|
|
return(delta);
|
|
}
|
|
|
|
vec2 ui_mouse_wheel(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
vec2 delta = mp_mouse_wheel(&ui->input);
|
|
return(delta);
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// ui boxes
|
|
//-----------------------------------------------------------------------------
|
|
|
|
bool ui_rect_hit(mp_rect r, vec2 p)
|
|
{
|
|
return( (p.x > r.x)
|
|
&&(p.x < r.x + r.w)
|
|
&&(p.y > r.y)
|
|
&&(p.y < r.y + r.h));
|
|
}
|
|
|
|
bool ui_box_hovering(ui_box* box, vec2 p)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
mp_rect clip = ui_clip_top();
|
|
mp_rect rect = ui_intersect_rects(clip, box->rect);
|
|
bool hit = ui_rect_hit(rect, p);
|
|
bool result = hit && (!ui->hovered || box->z >= ui->hovered->z);
|
|
return(result);
|
|
}
|
|
|
|
ui_box* ui_box_make_str8(str8 string, ui_flags flags)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_key key = ui_key_make_str8(string);
|
|
ui_box* box = ui_box_lookup_key(key);
|
|
|
|
if(!box)
|
|
{
|
|
box = mem_pool_alloc_type(&ui->boxPool, ui_box);
|
|
memset(box, 0, sizeof(ui_box));
|
|
|
|
box->key = key;
|
|
box->fresh = true;
|
|
ui_box_cache(ui, box);
|
|
}
|
|
else
|
|
{
|
|
box->fresh = false;
|
|
}
|
|
|
|
//NOTE: setup hierarchy
|
|
if(box->frameCounter != ui->frameCounter)
|
|
{
|
|
list_init(&box->children);
|
|
box->parent = ui_box_top();
|
|
if(box->parent)
|
|
{
|
|
list_append(&box->parent->children, &box->listElt);
|
|
box->parentClosed = box->parent->closed || box->parent->parentClosed;
|
|
}
|
|
|
|
if(box->flags & UI_FLAG_OVERLAY)
|
|
{
|
|
list_append(&ui->overlayList, &box->overlayElt);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
//maybe this should be a warning that we're trying to make the box twice in the same frame?
|
|
log_warning("trying to make ui box '%.*s' multiple times in the same frame\n", (int)box->string.len, box->string.ptr);
|
|
}
|
|
|
|
//NOTE: setup per-frame state
|
|
box->frameCounter = ui->frameCounter;
|
|
box->string = str8_push_copy(&ui->frameArena, string);
|
|
box->flags = flags;
|
|
|
|
//NOTE: create style and setup non-inherited attributes to default values
|
|
box->targetStyle = mem_arena_alloc_type(&ui->frameArena, ui_style);
|
|
ui_apply_style_with_mask(box->targetStyle, &UI_STYLE_DEFAULTS, ~0ULL);
|
|
|
|
//NOTE: set tags, before rules and last box
|
|
box->tags = ui->nextBoxTags;
|
|
ui->nextBoxTags = (list_info){0};
|
|
|
|
box->beforeRules = ui->nextBoxBeforeRules;
|
|
for_list(&box->beforeRules, rule, ui_style_rule, boxElt)
|
|
{
|
|
rule->owner = box;
|
|
}
|
|
ui->nextBoxBeforeRules = (list_info){0};
|
|
|
|
box->afterRules = ui->nextBoxAfterRules;
|
|
for_list(&box->afterRules, rule, ui_style_rule, boxElt)
|
|
{
|
|
rule->owner = box;
|
|
}
|
|
ui->nextBoxAfterRules = (list_info){0};
|
|
|
|
|
|
//NOTE: set scroll
|
|
vec2 wheel = ui_mouse_wheel();
|
|
if(box->flags & UI_FLAG_SCROLL_WHEEL_X)
|
|
{
|
|
box->scroll.x += wheel.x;
|
|
}
|
|
if(box->flags & UI_FLAG_SCROLL_WHEEL_Y)
|
|
{
|
|
box->scroll.y += wheel.y;
|
|
}
|
|
|
|
return(box);
|
|
}
|
|
|
|
ui_box* ui_box_begin_str8(str8 string, ui_flags flags)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_box* box = ui_box_make_str8(string, flags);
|
|
ui_box_push(box);
|
|
return(box);
|
|
}
|
|
|
|
ui_box* ui_box_end(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
ui_box* box = ui_box_top();
|
|
DEBUG_ASSERT(box, "box stack underflow");
|
|
|
|
ui_box_pop();
|
|
|
|
return(box);
|
|
}
|
|
|
|
void ui_box_set_draw_proc(ui_box* box, ui_box_draw_proc proc, void* data)
|
|
{
|
|
box->drawProc = proc;
|
|
box->drawData = data;
|
|
}
|
|
|
|
void ui_box_set_closed(ui_box* box, bool closed)
|
|
{
|
|
box->closed = closed;
|
|
}
|
|
|
|
bool ui_box_closed(ui_box* box)
|
|
{
|
|
return(box->closed);
|
|
}
|
|
|
|
void ui_box_activate(ui_box* box)
|
|
{
|
|
box->active = true;
|
|
}
|
|
|
|
void ui_box_deactivate(ui_box* box)
|
|
{
|
|
box->active = false;
|
|
}
|
|
|
|
bool ui_box_active(ui_box* box)
|
|
{
|
|
return(box->active);
|
|
}
|
|
|
|
void ui_box_set_hot(ui_box* box, bool hot)
|
|
{
|
|
box->hot = hot;
|
|
}
|
|
|
|
bool ui_box_hot(ui_box* box)
|
|
{
|
|
return(box->hot);
|
|
}
|
|
|
|
ui_sig ui_box_sig(ui_box* box)
|
|
{
|
|
//NOTE: compute input signals
|
|
ui_sig sig = {0};
|
|
|
|
ui_context* ui = ui_get_context();
|
|
mp_input_state* input = &ui->input;
|
|
|
|
sig.box = box;
|
|
|
|
if(!box->closed && !box->parentClosed)
|
|
{
|
|
vec2 mousePos = ui_mouse_position();
|
|
|
|
sig.hovering = ui_box_hovering(box, mousePos);
|
|
|
|
if(box->flags & UI_FLAG_CLICKABLE)
|
|
{
|
|
if(sig.hovering)
|
|
{
|
|
sig.pressed = mp_mouse_pressed(input, MP_MOUSE_LEFT);
|
|
if(sig.pressed)
|
|
{
|
|
box->dragging = true;
|
|
}
|
|
sig.doubleClicked = mp_mouse_double_clicked(input, MP_MOUSE_LEFT);
|
|
sig.rightPressed = mp_mouse_pressed(input, MP_MOUSE_RIGHT);
|
|
}
|
|
|
|
sig.released = mp_mouse_released(input, MP_MOUSE_LEFT);
|
|
if(sig.released)
|
|
{
|
|
if(box->dragging && sig.hovering)
|
|
{
|
|
sig.clicked = true;
|
|
}
|
|
}
|
|
|
|
if(!mp_mouse_down(input, MP_MOUSE_LEFT))
|
|
{
|
|
box->dragging = false;
|
|
}
|
|
|
|
sig.dragging = box->dragging;
|
|
}
|
|
|
|
sig.mouse = (vec2){mousePos.x - box->rect.x, mousePos.y - box->rect.y};
|
|
sig.delta = ui_mouse_delta();
|
|
sig.wheel = ui_mouse_wheel();
|
|
}
|
|
return(sig);
|
|
}
|
|
|
|
bool ui_box_hidden(ui_box* box)
|
|
{
|
|
return(box->closed || box->parentClosed);
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// Auto-layout
|
|
//-----------------------------------------------------------------------------
|
|
|
|
void ui_animate_f32(ui_context* ui, f32* value, f32 target, f32 animationTime)
|
|
{
|
|
if( animationTime < 1e-6
|
|
|| fabs(*value - target) < 0.001)
|
|
{
|
|
*value = target;
|
|
}
|
|
else
|
|
{
|
|
|
|
/*NOTE:
|
|
we use the euler approximation for df/dt = alpha(target - f)
|
|
the implicit form is f(t) = target*(1-e^(-alpha*t)) for the rising front,
|
|
and f(t) = e^(-alpha*t) for the falling front (e.g. classic RC circuit charge/discharge)
|
|
|
|
Here we bake alpha = 1/tau = -ln(0.05)/tr, with tr the rise time to 95% of target
|
|
*/
|
|
f32 alpha = 3/animationTime;
|
|
f32 dt = ui->lastFrameDuration;
|
|
|
|
*value += (target - *value)*alpha*dt;
|
|
}
|
|
}
|
|
|
|
void ui_animate_color(ui_context* ui, mg_color* color, mg_color target, f32 animationTime)
|
|
{
|
|
for(int i=0; i<4; i++)
|
|
{
|
|
ui_animate_f32(ui, &color->c[i], target.c[i], animationTime);
|
|
}
|
|
}
|
|
|
|
void ui_animate_ui_size(ui_context* ui, ui_size* size, ui_size target, f32 animationTime)
|
|
{
|
|
size->kind = target.kind;
|
|
ui_animate_f32(ui, &size->value, target.value, animationTime);
|
|
ui_animate_f32(ui, &size->relax, target.relax, animationTime);
|
|
}
|
|
|
|
void ui_box_animate_style(ui_context* ui, ui_box* box)
|
|
{
|
|
ui_style* targetStyle = box->targetStyle;
|
|
DEBUG_ASSERT(targetStyle);
|
|
|
|
f32 animationTime = targetStyle->animationTime;
|
|
|
|
//NOTE: interpolate based on transition values
|
|
ui_style_mask mask = box->targetStyle->animationMask;
|
|
|
|
if(box->fresh)
|
|
{
|
|
box->style = *targetStyle;
|
|
}
|
|
else
|
|
{
|
|
if(mask & UI_STYLE_SIZE_WIDTH)
|
|
{
|
|
ui_animate_ui_size(ui, &box->style.size.c[UI_AXIS_X], targetStyle->size.c[UI_AXIS_X], animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.size.c[UI_AXIS_X] = targetStyle->size.c[UI_AXIS_X];
|
|
}
|
|
|
|
if(mask & UI_STYLE_SIZE_HEIGHT)
|
|
{
|
|
ui_animate_ui_size(ui, &box->style.size.c[UI_AXIS_Y], targetStyle->size.c[UI_AXIS_Y], animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.size.c[UI_AXIS_Y] = targetStyle->size.c[UI_AXIS_Y];
|
|
}
|
|
|
|
if(mask & UI_STYLE_COLOR)
|
|
{
|
|
ui_animate_color(ui, &box->style.color, targetStyle->color, animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.color = targetStyle->color;
|
|
}
|
|
|
|
|
|
if(mask & UI_STYLE_BG_COLOR)
|
|
{
|
|
ui_animate_color(ui, &box->style.bgColor, targetStyle->bgColor, animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.bgColor = targetStyle->bgColor;
|
|
}
|
|
|
|
if(mask & UI_STYLE_BORDER_COLOR)
|
|
{
|
|
ui_animate_color(ui, &box->style.borderColor, targetStyle->borderColor, animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.borderColor = targetStyle->borderColor;
|
|
}
|
|
|
|
if(mask & UI_STYLE_FONT_SIZE)
|
|
{
|
|
ui_animate_f32(ui, &box->style.fontSize, targetStyle->fontSize, animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.fontSize = targetStyle->fontSize;
|
|
}
|
|
|
|
if(mask & UI_STYLE_BORDER_SIZE)
|
|
{
|
|
ui_animate_f32(ui, &box->style.borderSize, targetStyle->borderSize, animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.borderSize = targetStyle->borderSize;
|
|
}
|
|
|
|
if(mask & UI_STYLE_ROUNDNESS)
|
|
{
|
|
ui_animate_f32(ui, &box->style.roundness, targetStyle->roundness, animationTime);
|
|
}
|
|
else
|
|
{
|
|
box->style.roundness = targetStyle->roundness;
|
|
}
|
|
|
|
//NOTE: float target is animated in compute rect
|
|
box->style.floatTarget = targetStyle->floatTarget;
|
|
|
|
//TODO: non animatable attributes. use mask
|
|
box->style.layout = targetStyle->layout;
|
|
box->style.font = targetStyle->font;
|
|
}
|
|
}
|
|
|
|
void ui_apply_style_with_mask(ui_style* dst, ui_style* src, ui_style_mask mask)
|
|
{
|
|
if(mask & UI_STYLE_SIZE_WIDTH)
|
|
{
|
|
dst->size.c[UI_AXIS_X] = src->size.c[UI_AXIS_X];
|
|
}
|
|
if(mask & UI_STYLE_SIZE_HEIGHT)
|
|
{
|
|
dst->size.c[UI_AXIS_Y] = src->size.c[UI_AXIS_Y];
|
|
}
|
|
if(mask & UI_STYLE_LAYOUT_AXIS)
|
|
{
|
|
dst->layout.axis = src->layout.axis;
|
|
}
|
|
if(mask & UI_STYLE_LAYOUT_ALIGN_X)
|
|
{
|
|
dst->layout.align.x = src->layout.align.x;
|
|
}
|
|
if(mask & UI_STYLE_LAYOUT_ALIGN_Y)
|
|
{
|
|
dst->layout.align.y = src->layout.align.y;
|
|
}
|
|
if(mask & UI_STYLE_LAYOUT_SPACING)
|
|
{
|
|
dst->layout.spacing = src->layout.spacing;
|
|
}
|
|
if(mask & UI_STYLE_LAYOUT_MARGIN_X)
|
|
{
|
|
dst->layout.margin.x = src->layout.margin.x;
|
|
}
|
|
if(mask & UI_STYLE_LAYOUT_MARGIN_Y)
|
|
{
|
|
dst->layout.margin.y = src->layout.margin.y;
|
|
}
|
|
if(mask & UI_STYLE_FLOAT_X)
|
|
{
|
|
dst->floating.c[UI_AXIS_X] = src->floating.c[UI_AXIS_X];
|
|
dst->floatTarget.x = src->floatTarget.x;
|
|
}
|
|
if(mask & UI_STYLE_FLOAT_Y)
|
|
{
|
|
dst->floating.c[UI_AXIS_Y] = src->floating.c[UI_AXIS_Y];
|
|
dst->floatTarget.y = src->floatTarget.y;
|
|
}
|
|
if(mask & UI_STYLE_COLOR)
|
|
{
|
|
dst->color = src->color;
|
|
}
|
|
if(mask & UI_STYLE_BG_COLOR)
|
|
{
|
|
dst->bgColor = src->bgColor;
|
|
}
|
|
if(mask & UI_STYLE_BORDER_COLOR)
|
|
{
|
|
dst->borderColor = src->borderColor;
|
|
}
|
|
if(mask & UI_STYLE_BORDER_SIZE)
|
|
{
|
|
dst->borderSize = src->borderSize;
|
|
}
|
|
if(mask & UI_STYLE_ROUNDNESS)
|
|
{
|
|
dst->roundness = src->roundness;
|
|
}
|
|
if(mask & UI_STYLE_FONT)
|
|
{
|
|
dst->font = src->font;
|
|
}
|
|
if(mask & UI_STYLE_FONT_SIZE)
|
|
{
|
|
dst->fontSize = src->fontSize;
|
|
}
|
|
if(mask & UI_STYLE_ANIMATION_TIME)
|
|
{
|
|
dst->animationTime = src->animationTime;
|
|
}
|
|
if(mask & UI_STYLE_ANIMATION_MASK)
|
|
{
|
|
dst->animationMask = src->animationMask;
|
|
}
|
|
}
|
|
|
|
|
|
bool ui_style_selector_match(ui_box* box, ui_style_rule* rule, ui_selector* selector)
|
|
{
|
|
bool res = false;
|
|
switch(selector->kind)
|
|
{
|
|
case UI_SEL_ANY:
|
|
res = true;
|
|
break;
|
|
|
|
case UI_SEL_OWNER:
|
|
res = (box == rule->owner);
|
|
break;
|
|
|
|
case UI_SEL_TEXT:
|
|
res = !str8_cmp(box->string, selector->text);
|
|
break;
|
|
|
|
case UI_SEL_TAG:
|
|
{
|
|
for_list(&box->tags, elt, ui_tag_elt, listElt)
|
|
{
|
|
if(elt->tag.hash == selector->tag.hash)
|
|
{
|
|
res = true;
|
|
break;
|
|
}
|
|
}
|
|
} break;
|
|
|
|
case UI_SEL_STATUS:
|
|
{
|
|
res = true;
|
|
if(selector->status & UI_HOVER)
|
|
{
|
|
res = res && ui_box_hovering(box, ui_mouse_position());
|
|
}
|
|
if(selector->status & UI_ACTIVE)
|
|
{
|
|
res = res && box->active;
|
|
}
|
|
if(selector->status & UI_DRAGGING)
|
|
{
|
|
res = res && box->dragging;
|
|
}
|
|
} break;
|
|
|
|
case UI_SEL_KEY:
|
|
res = ui_key_equal(box->key, selector->key);
|
|
default:
|
|
break;
|
|
}
|
|
return(res);
|
|
}
|
|
|
|
void ui_style_rule_match(ui_context* ui, ui_box* box, ui_style_rule* rule, list_info* buildList, list_info* tmpList)
|
|
{
|
|
ui_selector* selector = list_first_entry(&rule->pattern.l, ui_selector, listElt);
|
|
bool match = ui_style_selector_match(box, rule, selector);
|
|
|
|
selector = list_next_entry(&rule->pattern.l, selector, ui_selector, listElt);
|
|
while(match && selector && selector->op == UI_SEL_AND)
|
|
{
|
|
match = match && ui_style_selector_match(box, rule, selector);
|
|
selector = list_next_entry(&rule->pattern.l, selector, ui_selector, listElt);
|
|
}
|
|
|
|
if(match)
|
|
{
|
|
if(!selector)
|
|
{
|
|
ui_apply_style_with_mask(box->targetStyle, rule->style, rule->mask);
|
|
}
|
|
else
|
|
{
|
|
//NOTE create derived rule if there's more than one selector
|
|
ui_style_rule* derived = mem_arena_alloc_type(&ui->frameArena, ui_style_rule);
|
|
derived->mask = rule->mask;
|
|
derived->style = rule->style;
|
|
derived->pattern.l = (list_info){&selector->listElt, rule->pattern.l.last};
|
|
|
|
list_append(buildList, &derived->buildElt);
|
|
list_append(tmpList, &derived->tmpElt);
|
|
}
|
|
}
|
|
}
|
|
|
|
void ui_styling_prepass(ui_context* ui, ui_box* box, list_info* before, list_info* after)
|
|
{
|
|
//NOTE: inherit style from parent
|
|
if(box->parent)
|
|
{
|
|
ui_apply_style_with_mask(box->targetStyle,
|
|
box->parent->targetStyle,
|
|
UI_STYLE_MASK_INHERITED);
|
|
}
|
|
|
|
|
|
//NOTE: append box before rules to before and tmp
|
|
list_info tmpBefore = {0};
|
|
for_list(&box->beforeRules, rule, ui_style_rule, boxElt)
|
|
{
|
|
list_append(before, &rule->buildElt);
|
|
list_append(&tmpBefore, &rule->tmpElt);
|
|
}
|
|
//NOTE: match before rules
|
|
for_list(before, rule, ui_style_rule, buildElt)
|
|
{
|
|
ui_style_rule_match(ui, box, rule, before, &tmpBefore);
|
|
}
|
|
|
|
//NOTE: prepend box after rules to after and append them to tmp
|
|
list_info tmpAfter = {0};
|
|
for_list_reverse(&box->afterRules, rule, ui_style_rule, boxElt)
|
|
{
|
|
list_push(after, &rule->buildElt);
|
|
list_append(&tmpAfter, &rule->tmpElt);
|
|
}
|
|
|
|
//NOTE: match after rules
|
|
for_list(after, rule, ui_style_rule, buildElt)
|
|
{
|
|
ui_style_rule_match(ui, box, rule, after, &tmpAfter);
|
|
}
|
|
|
|
//NOTE: compute static sizes
|
|
ui_box_animate_style(ui, box);
|
|
|
|
if(ui_box_hidden(box))
|
|
{
|
|
return;
|
|
}
|
|
|
|
ui_style* style = &box->style;
|
|
|
|
mp_rect textBox = {0};
|
|
ui_size desiredSize[2] = {box->style.size.c[UI_AXIS_X],
|
|
box->style.size.c[UI_AXIS_Y]};
|
|
|
|
if( desiredSize[UI_AXIS_X].kind == UI_SIZE_TEXT
|
|
||desiredSize[UI_AXIS_Y].kind == UI_SIZE_TEXT)
|
|
{
|
|
textBox = mg_text_bounding_box(style->font, style->fontSize, box->string);
|
|
}
|
|
|
|
for(int i=0; i<UI_AXIS_COUNT; i++)
|
|
{
|
|
ui_size size = desiredSize[i];
|
|
|
|
if(size.kind == UI_SIZE_TEXT)
|
|
{
|
|
f32 margin = style->layout.margin.c[i];
|
|
box->rect.c[2+i] = textBox.c[2+i] + margin*2;
|
|
}
|
|
else if(size.kind == UI_SIZE_PIXELS)
|
|
{
|
|
box->rect.c[2+i] = size.value;
|
|
}
|
|
}
|
|
|
|
//NOTE: descend in children
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
ui_styling_prepass(ui, child, before, after);
|
|
}
|
|
|
|
//NOTE: remove temporary rules
|
|
for_list(&tmpBefore, rule, ui_style_rule, tmpElt)
|
|
{
|
|
list_remove(before, &rule->buildElt);
|
|
}
|
|
for_list(&tmpAfter, rule, ui_style_rule, tmpElt)
|
|
{
|
|
list_remove(after, &rule->buildElt);
|
|
}
|
|
}
|
|
|
|
bool ui_layout_downward_dependency(ui_box* child, int axis)
|
|
{
|
|
return( !ui_box_hidden(child)
|
|
&& !child->style.floating.c[axis]
|
|
&& child->style.size.c[axis].kind != UI_SIZE_PARENT
|
|
&& child->style.size.c[axis].kind != UI_SIZE_PARENT_MINUS_PIXELS);
|
|
}
|
|
|
|
void ui_layout_downward_dependent_size(ui_context* ui, ui_box* box, int axis)
|
|
{
|
|
//NOTE: layout children and compute spacing
|
|
f32 count = 0;
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
if(!ui_box_hidden(child))
|
|
{
|
|
ui_layout_downward_dependent_size(ui, child, axis);
|
|
|
|
if( box->style.layout.axis == axis
|
|
&& !child->style.floating.c[axis])
|
|
{
|
|
count++;
|
|
}
|
|
}
|
|
}
|
|
box->spacing[axis] = maximum(0, count-1)*box->style.layout.spacing;
|
|
|
|
ui_size* size = &box->style.size.c[axis];
|
|
if(size->kind == UI_SIZE_CHILDREN)
|
|
{
|
|
//NOTE: if box is dependent on children, compute children's size. If we're in the layout
|
|
// axis this is the sum of each child size, otherwise it is the maximum child size
|
|
f32 sum = 0;
|
|
|
|
if(box->style.layout.axis == axis)
|
|
{
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
if(ui_layout_downward_dependency(child, axis))
|
|
{
|
|
sum += child->rect.c[2+axis];
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
if(ui_layout_downward_dependency(child, axis))
|
|
{
|
|
sum = maximum(sum, child->rect.c[2+axis]);
|
|
}
|
|
}
|
|
}
|
|
f32 margin = box->style.layout.margin.c[axis];
|
|
box->rect.c[2+axis] = sum + box->spacing[axis] + 2*margin;
|
|
}
|
|
}
|
|
|
|
void ui_layout_upward_dependent_size(ui_context* ui, ui_box* box, int axis)
|
|
{
|
|
//NOTE: re-compute/set size of children that depend on box's size
|
|
|
|
f32 margin = box->style.layout.margin.c[axis];
|
|
f32 availableSize = maximum(0, box->rect.c[2+axis] - box->spacing[axis] - 2*margin);
|
|
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
ui_size* size = &child->style.size.c[axis];
|
|
if(size->kind == UI_SIZE_PARENT)
|
|
{
|
|
child->rect.c[2+axis] = availableSize * size->value;
|
|
}
|
|
else if(size->kind == UI_SIZE_PARENT_MINUS_PIXELS)
|
|
{
|
|
child->rect.c[2+axis] = maximum(0, availableSize - size->value);
|
|
}
|
|
}
|
|
|
|
//NOTE: solve downard conflicts
|
|
int overflowFlag = (UI_FLAG_ALLOW_OVERFLOW_X << axis);
|
|
f32 sum = 0;
|
|
|
|
if(box->style.layout.axis == axis)
|
|
{
|
|
//NOTE: if we're solving in the layout axis, first compute total sum of children and
|
|
// total slack available
|
|
f32 slack = 0;
|
|
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
if( !ui_box_hidden(child)
|
|
&& !child->style.floating.c[axis])
|
|
{
|
|
sum += child->rect.c[2+axis];
|
|
slack += child->rect.c[2+axis] * child->style.size.c[axis].relax;
|
|
}
|
|
}
|
|
|
|
if(!(box->flags & overflowFlag))
|
|
{
|
|
//NOTE: then remove excess proportionally to each box slack, and recompute children sum.
|
|
f32 totalContents = sum + box->spacing[axis] + 2*box->style.layout.margin.c[axis];
|
|
f32 excess = ClampLowBound(totalContents - box->rect.c[2+axis], 0);
|
|
f32 alpha = Clamp(excess / slack, 0, 1);
|
|
|
|
sum = 0;
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
f32 relax = child->style.size.c[axis].relax;
|
|
child->rect.c[2+axis] -= alpha * child->rect.c[2+axis] * relax;
|
|
sum += child->rect.c[2+axis];
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
//NOTE: if we're solving on the secondary axis, we remove excess to each box individually
|
|
// according to its own slack. Children sum is the maximum child size.
|
|
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
if(!ui_box_hidden(child) && !child->style.floating.c[axis])
|
|
{
|
|
if(!(box->flags & overflowFlag))
|
|
{
|
|
f32 totalContents = child->rect.c[2+axis] + 2*box->style.layout.margin.c[axis];
|
|
f32 excess = ClampLowBound(totalContents - box->rect.c[2+axis], 0);
|
|
f32 relax = child->style.size.c[axis].relax;
|
|
child->rect.c[2+axis] -= minimum(excess, child->rect.c[2+axis]*relax);
|
|
}
|
|
sum = maximum(sum, child->rect.c[2+axis]);
|
|
}
|
|
}
|
|
}
|
|
|
|
box->childrenSum[axis] = sum;
|
|
|
|
//NOTE: recurse in children
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
ui_layout_upward_dependent_size(ui, child, axis);
|
|
}
|
|
}
|
|
|
|
void ui_layout_compute_rect(ui_context* ui, ui_box* box, vec2 pos)
|
|
{
|
|
if(ui_box_hidden(box))
|
|
{
|
|
return;
|
|
}
|
|
|
|
box->rect.x = pos.x;
|
|
box->rect.y = pos.y;
|
|
box->z = ui->z;
|
|
ui->z++;
|
|
|
|
ui_axis layoutAxis = box->style.layout.axis;
|
|
ui_axis secondAxis = (layoutAxis == UI_AXIS_X) ? UI_AXIS_Y : UI_AXIS_X;
|
|
f32 spacing = box->style.layout.spacing;
|
|
|
|
ui_align* align = box->style.layout.align.c;
|
|
|
|
vec2 origin = {box->rect.x,
|
|
box->rect.y};
|
|
vec2 currentPos = origin;
|
|
|
|
vec2 margin = {box->style.layout.margin.x,
|
|
box->style.layout.margin.y};
|
|
|
|
currentPos.x += margin.x;
|
|
currentPos.y += margin.y;
|
|
|
|
for(int i=0; i<UI_AXIS_COUNT; i++)
|
|
{
|
|
if(align[i] == UI_ALIGN_END)
|
|
{
|
|
currentPos.c[i] = origin.c[i] + box->rect.c[2+i] - (box->childrenSum[i] + box->spacing[i] + margin.c[i]);
|
|
}
|
|
}
|
|
if(align[layoutAxis] == UI_ALIGN_CENTER)
|
|
{
|
|
currentPos.c[layoutAxis] = origin.c[layoutAxis]
|
|
+ 0.5*(box->rect.c[2+layoutAxis]
|
|
- (box->childrenSum[layoutAxis] + box->spacing[layoutAxis]));
|
|
}
|
|
|
|
currentPos.x -= box->scroll.x;
|
|
currentPos.y -= box->scroll.y;
|
|
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
if(align[secondAxis] == UI_ALIGN_CENTER)
|
|
{
|
|
currentPos.c[secondAxis] = origin.c[secondAxis] + 0.5*(box->rect.c[2+secondAxis] - child->rect.c[2+secondAxis]);
|
|
}
|
|
|
|
vec2 childPos = currentPos;
|
|
for(int i=0; i<UI_AXIS_COUNT; i++)
|
|
{
|
|
if(child->style.floating.c[i])
|
|
{
|
|
ui_style* style = child->targetStyle;
|
|
if((child->targetStyle->animationMask & (UI_STYLE_FLOAT_X << i))
|
|
&& !child->fresh)
|
|
{
|
|
ui_animate_f32(ui, &child->floatPos.c[i], child->style.floatTarget.c[i], style->animationTime);
|
|
}
|
|
else
|
|
{
|
|
child->floatPos.c[i] = child->style.floatTarget.c[i];
|
|
}
|
|
childPos.c[i] = origin.c[i] + child->floatPos.c[i];
|
|
}
|
|
}
|
|
|
|
ui_layout_compute_rect(ui, child, childPos);
|
|
|
|
if(!child->style.floating.c[layoutAxis])
|
|
{
|
|
currentPos.c[layoutAxis] += child->rect.c[2+layoutAxis] + spacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
void ui_layout_find_next_hovered_recursive(ui_context* ui, ui_box* box, vec2 p)
|
|
{
|
|
if(ui_box_hidden(box))
|
|
{
|
|
return;
|
|
}
|
|
|
|
bool hit = ui_rect_hit(box->rect, p);
|
|
if(hit && (box->flags & UI_FLAG_BLOCK_MOUSE))
|
|
{
|
|
ui->hovered = box;
|
|
}
|
|
if(hit || !(box->flags & UI_FLAG_CLIP))
|
|
{
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
ui_layout_find_next_hovered_recursive(ui, child, p);
|
|
}
|
|
}
|
|
}
|
|
|
|
void ui_layout_find_next_hovered(ui_context* ui, vec2 p)
|
|
{
|
|
ui->hovered = 0;
|
|
ui_layout_find_next_hovered_recursive(ui, ui->root, p);
|
|
}
|
|
|
|
void ui_solve_layout(ui_context* ui)
|
|
{
|
|
list_info beforeRules = {0};
|
|
list_info afterRules = {0};
|
|
|
|
//NOTE: style and compute static sizes
|
|
ui_styling_prepass(ui, ui->root, &beforeRules, &afterRules);
|
|
|
|
//NOTE: reparent overlay boxes
|
|
for_list(&ui->overlayList, box, ui_box, overlayElt)
|
|
{
|
|
if(box->parent)
|
|
{
|
|
list_remove(&box->parent->children, &box->listElt);
|
|
list_append(&ui->overlay->children, &box->listElt);
|
|
}
|
|
}
|
|
|
|
//NOTE: compute layout
|
|
for(int axis=0; axis<UI_AXIS_COUNT; axis++)
|
|
{
|
|
ui_layout_downward_dependent_size(ui, ui->root, axis);
|
|
ui_layout_upward_dependent_size(ui, ui->root, axis);
|
|
}
|
|
ui_layout_compute_rect(ui, ui->root, (vec2){0, 0});
|
|
|
|
vec2 p = ui_mouse_position();
|
|
ui_layout_find_next_hovered(ui, p);
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// Drawing
|
|
//-----------------------------------------------------------------------------
|
|
|
|
void ui_rectangle_fill(mp_rect rect, f32 roundness)
|
|
{
|
|
if(roundness)
|
|
{
|
|
mg_rounded_rectangle_fill(rect.x, rect.y, rect.w, rect.h, roundness);
|
|
}
|
|
else
|
|
{
|
|
mg_rectangle_fill(rect.x, rect.y, rect.w, rect.h);
|
|
}
|
|
}
|
|
|
|
void ui_rectangle_stroke(mp_rect rect, f32 roundness)
|
|
{
|
|
if(roundness)
|
|
{
|
|
mg_rounded_rectangle_stroke(rect.x, rect.y, rect.w, rect.h, roundness);
|
|
}
|
|
else
|
|
{
|
|
mg_rectangle_stroke(rect.x, rect.y, rect.w, rect.h);
|
|
}
|
|
}
|
|
|
|
void ui_draw_box(ui_box* box)
|
|
{
|
|
if(ui_box_hidden(box))
|
|
{
|
|
return;
|
|
}
|
|
|
|
ui_style* style = &box->style;
|
|
|
|
if(box->flags & UI_FLAG_CLIP)
|
|
{
|
|
mg_clip_push(box->rect.x, box->rect.y, box->rect.w, box->rect.h);
|
|
}
|
|
|
|
if(box->flags & UI_FLAG_DRAW_BACKGROUND)
|
|
{
|
|
mg_set_color(style->bgColor);
|
|
ui_rectangle_fill(box->rect, style->roundness);
|
|
}
|
|
|
|
if((box->flags & UI_FLAG_DRAW_PROC) && box->drawProc)
|
|
{
|
|
box->drawProc(box, box->drawData);
|
|
}
|
|
|
|
for_list(&box->children, child, ui_box, listElt)
|
|
{
|
|
ui_draw_box(child);
|
|
}
|
|
|
|
if(box->flags & UI_FLAG_DRAW_TEXT)
|
|
{
|
|
mp_rect textBox = mg_text_bounding_box(style->font, style->fontSize, box->string);
|
|
|
|
f32 x = 0;
|
|
f32 y = 0;
|
|
switch(style->layout.align.x)
|
|
{
|
|
case UI_ALIGN_START:
|
|
x = box->rect.x + style->layout.margin.x;
|
|
break;
|
|
|
|
case UI_ALIGN_END:
|
|
x = box->rect.x + box->rect.w - style->layout.margin.x - textBox.w;
|
|
break;
|
|
|
|
case UI_ALIGN_CENTER:
|
|
x = box->rect.x + 0.5*(box->rect.w - textBox.w);
|
|
break;
|
|
}
|
|
|
|
switch(style->layout.align.y)
|
|
{
|
|
case UI_ALIGN_START:
|
|
y = box->rect.y + style->layout.margin.y - textBox.y;
|
|
break;
|
|
|
|
case UI_ALIGN_END:
|
|
y = box->rect.y + box->rect.h - style->layout.margin.y - textBox.h + textBox.y;
|
|
break;
|
|
|
|
case UI_ALIGN_CENTER:
|
|
y = box->rect.y + 0.5*(box->rect.h - textBox.h) - textBox.y;
|
|
break;
|
|
}
|
|
|
|
mg_set_font(style->font);
|
|
mg_set_font_size(style->fontSize);
|
|
mg_set_color(style->color);
|
|
|
|
mg_move_to(x, y);
|
|
mg_text_outlines(box->string);
|
|
mg_fill();
|
|
}
|
|
|
|
if(box->flags & UI_FLAG_CLIP)
|
|
{
|
|
mg_clip_pop();
|
|
}
|
|
|
|
if(box->flags & UI_FLAG_DRAW_BORDER)
|
|
{
|
|
mg_set_width(style->borderSize);
|
|
mg_set_color(style->borderColor);
|
|
ui_rectangle_stroke(box->rect, style->roundness);
|
|
}
|
|
}
|
|
|
|
void ui_draw()
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
//NOTE: draw
|
|
bool oldTextFlip = mg_get_text_flip();
|
|
mg_set_text_flip(false);
|
|
|
|
ui_draw_box(ui->root);
|
|
|
|
mg_set_text_flip(oldTextFlip);
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// frame begin/end
|
|
//-----------------------------------------------------------------------------
|
|
|
|
void ui_begin_frame(ui_style* defaultStyle, ui_style_mask defaultMask)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
mem_arena_clear(&ui->frameArena);
|
|
|
|
ui->frameCounter++;
|
|
f64 time = mp_get_time(MP_CLOCK_MONOTONIC);
|
|
ui->lastFrameDuration = time - ui->frameTime;
|
|
ui->frameTime = time;
|
|
|
|
ui->clipStack = 0;
|
|
ui->z = 0;
|
|
|
|
vec2 size = mg_canvas_size();
|
|
|
|
defaultMask &= UI_STYLE_COLOR
|
|
| UI_STYLE_BG_COLOR
|
|
| UI_STYLE_BORDER_COLOR
|
|
| UI_STYLE_FONT
|
|
| UI_STYLE_FONT_SIZE;
|
|
|
|
ui_style_match_before(ui_pattern_all(), defaultStyle, defaultMask);
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, size.x},
|
|
.size.height = {UI_SIZE_PIXELS, size.y}},
|
|
UI_STYLE_SIZE);
|
|
|
|
ui->root = ui_box_begin("_root_", 0);
|
|
|
|
ui_style_mask contentStyleMask = UI_STYLE_SIZE
|
|
| UI_STYLE_LAYOUT
|
|
| UI_STYLE_FLOAT;
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 1},
|
|
.layout = {UI_AXIS_Y, UI_ALIGN_START, UI_ALIGN_START},
|
|
.floating = {true, true},
|
|
.floatTarget = {0, 0}},
|
|
contentStyleMask);
|
|
|
|
ui_box* contents = ui_box_make("_contents_", 0);
|
|
|
|
ui_style_next(&(ui_style){.layout = {UI_AXIS_Y, UI_ALIGN_START, UI_ALIGN_START},
|
|
.floating = {true, true},
|
|
.floatTarget = {0, 0}},
|
|
UI_STYLE_LAYOUT | UI_STYLE_FLOAT_X | UI_STYLE_FLOAT_Y);
|
|
|
|
ui->overlay = ui_box_make("_overlay_", 0);
|
|
ui->overlayList = (list_info){0};
|
|
|
|
ui->nextBoxBeforeRules = (list_info){0};
|
|
ui->nextBoxAfterRules = (list_info){0};
|
|
ui->nextBoxTags = (list_info){0};
|
|
|
|
ui_box_push(contents);
|
|
}
|
|
|
|
void ui_end_frame(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_box_pop();
|
|
|
|
ui_box* box = ui_box_end();
|
|
DEBUG_ASSERT(box == ui->root, "unbalanced box stack");
|
|
|
|
//TODO: check balancing of style stacks
|
|
|
|
//NOTE: layout
|
|
ui_solve_layout(ui);
|
|
|
|
//NOTE: prune unused boxes
|
|
for(int i=0; i<UI_BOX_MAP_BUCKET_COUNT; i++)
|
|
{
|
|
for_list_safe(&ui->boxMap[i], box, ui_box, bucketElt)
|
|
{
|
|
if(box->frameCounter < ui->frameCounter)
|
|
{
|
|
list_remove(&ui->boxMap[i], &box->bucketElt);
|
|
}
|
|
}
|
|
}
|
|
|
|
mp_input_next_frame(&ui->input);
|
|
}
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// Init / cleanup
|
|
//-----------------------------------------------------------------------------
|
|
void ui_init(ui_context* ui)
|
|
{
|
|
__uiCurrentContext = &__uiThreadContext;
|
|
|
|
memset(ui, 0, sizeof(ui_context));
|
|
mem_arena_init(&ui->frameArena);
|
|
mem_pool_init(&ui->boxPool, sizeof(ui_box));
|
|
ui->init = true;
|
|
|
|
ui_set_context(ui);
|
|
}
|
|
|
|
void ui_cleanup(void)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
mem_arena_release(&ui->frameArena);
|
|
mem_pool_release(&ui->boxPool);
|
|
ui->init = false;
|
|
}
|
|
|
|
|
|
//-----------------------------------------------------------------------------
|
|
// label
|
|
//-----------------------------------------------------------------------------
|
|
|
|
ui_sig ui_label_str8(str8 label)
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_TEXT, 0, 0},
|
|
.size.height = {UI_SIZE_TEXT, 0, 0}},
|
|
UI_STYLE_SIZE_WIDTH | UI_STYLE_SIZE_HEIGHT);
|
|
|
|
ui_flags flags = UI_FLAG_CLIP
|
|
| UI_FLAG_DRAW_TEXT;
|
|
ui_box* box = ui_box_make_str8(label, flags);
|
|
|
|
ui_sig sig = ui_box_sig(box);
|
|
return(sig);
|
|
}
|
|
|
|
ui_sig ui_label(const char* label)
|
|
{
|
|
return(ui_label_str8(STR8((char*)label)));
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// button
|
|
//------------------------------------------------------------------------------
|
|
|
|
ui_sig ui_button_behavior(ui_box* box)
|
|
{
|
|
ui_sig sig = ui_box_sig(box);
|
|
|
|
if(sig.hovering)
|
|
{
|
|
ui_box_set_hot(box, true);
|
|
if(sig.dragging)
|
|
{
|
|
ui_box_activate(box);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
ui_box_set_hot(box, false);
|
|
}
|
|
if(!sig.dragging)
|
|
{
|
|
ui_box_deactivate(box);
|
|
}
|
|
return(sig);
|
|
}
|
|
|
|
ui_sig ui_button_str8(str8 label)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_style defaultStyle = {.size.width = {UI_SIZE_TEXT},
|
|
.size.height = {UI_SIZE_TEXT},
|
|
.layout.align.x = UI_ALIGN_CENTER,
|
|
.layout.align.y = UI_ALIGN_CENTER,
|
|
.layout.margin.x = 5,
|
|
.layout.margin.y = 5,
|
|
.bgColor = {0.5, 0.5, 0.5, 1},
|
|
.borderColor = {0.2, 0.2, 0.2, 1},
|
|
.borderSize = 1,
|
|
.roundness = 10};
|
|
|
|
ui_style_mask defaultMask = UI_STYLE_SIZE_WIDTH
|
|
| UI_STYLE_SIZE_HEIGHT
|
|
| UI_STYLE_LAYOUT_MARGIN_X
|
|
| UI_STYLE_LAYOUT_MARGIN_Y
|
|
| UI_STYLE_LAYOUT_ALIGN_X
|
|
| UI_STYLE_LAYOUT_ALIGN_Y
|
|
| UI_STYLE_BG_COLOR
|
|
| UI_STYLE_BORDER_COLOR
|
|
| UI_STYLE_BORDER_SIZE
|
|
| UI_STYLE_ROUNDNESS;
|
|
|
|
ui_style_next(&defaultStyle, defaultMask);
|
|
|
|
ui_style activeStyle = {.bgColor = {0.3, 0.3, 0.3, 1},
|
|
.borderColor = {0.2, 0.2, 0.2, 1},
|
|
.borderSize = 2};
|
|
ui_style_mask activeMask = UI_STYLE_BG_COLOR
|
|
| UI_STYLE_BORDER_COLOR
|
|
| UI_STYLE_BORDER_SIZE;
|
|
ui_pattern activePattern = {0};
|
|
ui_pattern_push(&ui->frameArena,
|
|
&activePattern,
|
|
(ui_selector){.kind = UI_SEL_STATUS,
|
|
.status = UI_ACTIVE|UI_HOVER});
|
|
ui_style_match_before(activePattern, &activeStyle, activeMask);
|
|
|
|
ui_flags flags = UI_FLAG_CLICKABLE
|
|
| UI_FLAG_CLIP
|
|
| UI_FLAG_DRAW_BACKGROUND
|
|
| UI_FLAG_DRAW_BORDER
|
|
| UI_FLAG_DRAW_TEXT
|
|
| UI_FLAG_HOT_ANIMATION
|
|
| UI_FLAG_ACTIVE_ANIMATION;
|
|
|
|
ui_box* box = ui_box_make_str8(label, flags);
|
|
ui_tag_box(box, "button");
|
|
|
|
ui_sig sig = ui_button_behavior(box);
|
|
return(sig);
|
|
}
|
|
|
|
ui_sig ui_button(const char* label)
|
|
{
|
|
return(ui_button_str8(STR8((char*)label)));
|
|
}
|
|
|
|
void ui_checkbox_draw(ui_box* box, void* data)
|
|
{
|
|
bool checked = *(bool*)data;
|
|
if(checked)
|
|
{
|
|
mg_move_to(box->rect.x + 0.2*box->rect.w, box->rect.y + 0.5*box->rect.h);
|
|
mg_line_to(box->rect.x + 0.4*box->rect.w, box->rect.y + 0.75*box->rect.h);
|
|
mg_line_to(box->rect.x + 0.8*box->rect.w, box->rect.y + 0.2*box->rect.h);
|
|
|
|
mg_set_color(box->style.color);
|
|
mg_set_width(0.2*box->rect.w);
|
|
mg_set_joint(MG_JOINT_MITER);
|
|
mg_set_max_joint_excursion(0.2 * box->rect.h);
|
|
mg_stroke();
|
|
}
|
|
}
|
|
|
|
ui_sig ui_checkbox(const char* name, bool* checked)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_style defaultStyle = {.size.width = {UI_SIZE_PIXELS, 20},
|
|
.size.height = {UI_SIZE_PIXELS, 20},
|
|
.bgColor = {1, 1, 1, 1},
|
|
.color = {0, 0, 0, 1},
|
|
.borderColor = {0.2, 0.2, 0.2, 1},
|
|
.borderSize = 1,
|
|
.roundness = 5};
|
|
|
|
ui_style_mask defaultMask = UI_STYLE_SIZE_WIDTH
|
|
| UI_STYLE_SIZE_HEIGHT
|
|
| UI_STYLE_BG_COLOR
|
|
| UI_STYLE_COLOR
|
|
| UI_STYLE_BORDER_COLOR
|
|
| UI_STYLE_BORDER_SIZE
|
|
| UI_STYLE_ROUNDNESS;
|
|
|
|
ui_style_next(&defaultStyle, defaultMask);
|
|
|
|
ui_style activeStyle = {.bgColor = {0.5, 0.5, 0.5, 1},
|
|
.borderColor = {0.2, 0.2, 0.2, 1},
|
|
.borderSize = 2};
|
|
ui_style_mask activeMask = UI_STYLE_BG_COLOR
|
|
| UI_STYLE_BORDER_COLOR
|
|
| UI_STYLE_BORDER_SIZE;
|
|
ui_pattern activePattern = {0};
|
|
ui_pattern_push(&ui->frameArena,
|
|
&activePattern,
|
|
(ui_selector){.kind = UI_SEL_STATUS,
|
|
.status = UI_ACTIVE|UI_HOVER});
|
|
ui_style_match_before(activePattern, &activeStyle, activeMask);
|
|
|
|
ui_flags flags = UI_FLAG_CLICKABLE
|
|
| UI_FLAG_CLIP
|
|
| UI_FLAG_DRAW_BACKGROUND
|
|
| UI_FLAG_DRAW_PROC
|
|
| UI_FLAG_DRAW_BORDER
|
|
| UI_FLAG_HOT_ANIMATION
|
|
| UI_FLAG_ACTIVE_ANIMATION;
|
|
|
|
ui_box* box = ui_box_make(name, flags);
|
|
ui_tag_box(box, "checkbox");
|
|
|
|
ui_sig sig = ui_button_behavior(box);
|
|
if(sig.clicked)
|
|
{
|
|
*checked = !*checked;
|
|
}
|
|
ui_box_set_draw_proc(box, ui_checkbox_draw, checked);
|
|
|
|
return(sig);
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// slider / scrollbar
|
|
//------------------------------------------------------------------------------
|
|
ui_box* ui_slider(const char* label, f32 thumbRatio, f32* scrollValue)
|
|
{
|
|
ui_style_match_before(ui_pattern_all(), &(ui_style){0}, UI_STYLE_LAYOUT);
|
|
ui_box* frame = ui_box_begin(label, 0);
|
|
{
|
|
f32 beforeRatio = (*scrollValue) * (1. - thumbRatio);
|
|
f32 afterRatio = (1. - *scrollValue) * (1. - thumbRatio);
|
|
|
|
ui_axis trackAxis = (frame->rect.w > frame->rect.h) ? UI_AXIS_X : UI_AXIS_Y;
|
|
ui_axis secondAxis = (trackAxis == UI_AXIS_Y) ? UI_AXIS_X : UI_AXIS_Y;
|
|
f32 roundness = 0.5*frame->rect.c[2+secondAxis];
|
|
f32 animationTime = 0.5;
|
|
|
|
ui_style trackStyle = {.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 1},
|
|
.layout.axis = trackAxis,
|
|
.layout.align.x = UI_ALIGN_START,
|
|
.layout.align.y = UI_ALIGN_START,
|
|
.bgColor = {0.5, 0.5, 0.5, 1},
|
|
.roundness = roundness};
|
|
|
|
ui_style beforeStyle = trackStyle;
|
|
beforeStyle.size.c[trackAxis] = (ui_size){UI_SIZE_PARENT, beforeRatio};
|
|
|
|
ui_style afterStyle = trackStyle;
|
|
afterStyle.size.c[trackAxis] = (ui_size){UI_SIZE_PARENT, afterRatio};
|
|
|
|
ui_style thumbStyle = trackStyle;
|
|
thumbStyle.size.c[trackAxis] = (ui_size){UI_SIZE_PARENT, thumbRatio};
|
|
thumbStyle.bgColor = (mg_color){0.3, 0.3, 0.3, 1};
|
|
|
|
ui_style_mask styleMask = UI_STYLE_SIZE_WIDTH
|
|
| UI_STYLE_SIZE_HEIGHT
|
|
| UI_STYLE_LAYOUT
|
|
| UI_STYLE_BG_COLOR
|
|
| UI_STYLE_ROUNDNESS;
|
|
|
|
ui_flags trackFlags = UI_FLAG_CLIP
|
|
| UI_FLAG_DRAW_BACKGROUND
|
|
| UI_FLAG_HOT_ANIMATION
|
|
| UI_FLAG_ACTIVE_ANIMATION;
|
|
|
|
ui_style_next(&trackStyle, styleMask);
|
|
ui_box* track = ui_box_begin("track", trackFlags);
|
|
|
|
ui_style_next(&beforeStyle, UI_STYLE_SIZE_WIDTH|UI_STYLE_SIZE_HEIGHT);
|
|
ui_box* beforeSpacer = ui_box_make("before", 0);
|
|
|
|
|
|
ui_flags thumbFlags = UI_FLAG_CLICKABLE
|
|
| UI_FLAG_DRAW_BACKGROUND
|
|
| UI_FLAG_HOT_ANIMATION
|
|
| UI_FLAG_ACTIVE_ANIMATION;
|
|
|
|
ui_style_next(&thumbStyle, styleMask);
|
|
ui_box* thumb = ui_box_make("thumb", thumbFlags);
|
|
|
|
|
|
ui_style_next(&afterStyle, UI_STYLE_SIZE_WIDTH|UI_STYLE_SIZE_HEIGHT);
|
|
ui_box* afterSpacer = ui_box_make("after", 0);
|
|
|
|
ui_box_end();
|
|
|
|
//NOTE: interaction
|
|
ui_sig thumbSig = ui_box_sig(thumb);
|
|
if(thumbSig.dragging)
|
|
{
|
|
f32 trackExtents = track->rect.c[2+trackAxis] - thumb->rect.c[2+trackAxis];
|
|
f32 delta = thumbSig.delta.c[trackAxis]/trackExtents;
|
|
f32 oldValue = *scrollValue;
|
|
|
|
*scrollValue += delta;
|
|
*scrollValue = Clamp(*scrollValue, 0, 1);
|
|
}
|
|
|
|
ui_sig trackSig = ui_box_sig(track);
|
|
|
|
if(ui_box_active(frame))
|
|
{
|
|
//NOTE: activated from outside
|
|
ui_box_set_hot(track, true);
|
|
ui_box_set_hot(thumb, true);
|
|
ui_box_activate(track);
|
|
ui_box_activate(thumb);
|
|
}
|
|
|
|
if(trackSig.hovering)
|
|
{
|
|
ui_box_set_hot(track, true);
|
|
ui_box_set_hot(thumb, true);
|
|
}
|
|
else if(thumbSig.wheel.c[trackAxis] == 0)
|
|
{
|
|
ui_box_set_hot(track, false);
|
|
ui_box_set_hot(thumb, false);
|
|
}
|
|
|
|
if(thumbSig.dragging)
|
|
{
|
|
ui_box_activate(track);
|
|
ui_box_activate(thumb);
|
|
}
|
|
else if(thumbSig.wheel.c[trackAxis] == 0)
|
|
{
|
|
ui_box_deactivate(track);
|
|
ui_box_deactivate(thumb);
|
|
ui_box_deactivate(frame);
|
|
}
|
|
|
|
} ui_box_end();
|
|
|
|
return(frame);
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// panels
|
|
//------------------------------------------------------------------------------
|
|
void ui_panel_begin(const char* str, ui_flags flags)
|
|
{
|
|
flags = flags
|
|
| UI_FLAG_CLIP
|
|
| UI_FLAG_BLOCK_MOUSE
|
|
| UI_FLAG_ALLOW_OVERFLOW_X
|
|
| UI_FLAG_ALLOW_OVERFLOW_Y;
|
|
|
|
ui_box_begin(str, flags);
|
|
}
|
|
|
|
void ui_panel_end(void)
|
|
{
|
|
ui_box* panel = ui_box_top();
|
|
ui_sig sig = ui_box_sig(panel);
|
|
|
|
f32 contentsW = ClampLowBound(panel->childrenSum[0], panel->rect.w);
|
|
f32 contentsH = ClampLowBound(panel->childrenSum[1], panel->rect.h);
|
|
|
|
contentsW = ClampLowBound(contentsW, 1);
|
|
contentsH = ClampLowBound(contentsH, 1);
|
|
|
|
ui_box* scrollBarX = 0;
|
|
ui_box* scrollBarY = 0;
|
|
|
|
bool needsScrollX = contentsW > panel->rect.w;
|
|
bool needsScrollY = contentsH > panel->rect.h;
|
|
|
|
if(needsScrollX)
|
|
{
|
|
f32 thumbRatioX = panel->rect.w / contentsW;
|
|
f32 sliderX = panel->scroll.x /(contentsW - panel->rect.w);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1., 0},
|
|
.size.height = {UI_SIZE_PIXELS, 10, 0},
|
|
.floating.x = true,
|
|
.floating.y = true,
|
|
.floatTarget = {0, panel->rect.h - 10}},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_FLOAT);
|
|
|
|
scrollBarX = ui_slider("scrollerX", thumbRatioX, &sliderX);
|
|
|
|
panel->scroll.x = sliderX * (contentsW - panel->rect.w);
|
|
if(sig.hovering)
|
|
{
|
|
ui_box_activate(scrollBarX);
|
|
}
|
|
}
|
|
|
|
if(needsScrollY)
|
|
{
|
|
f32 thumbRatioY = panel->rect.h / contentsH;
|
|
f32 sliderY = panel->scroll.y /(contentsH - panel->rect.h);
|
|
|
|
f32 spacerSize = needsScrollX ? 10 : 0;
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 10, 0},
|
|
.size.height = {UI_SIZE_PARENT_MINUS_PIXELS, spacerSize, 0},
|
|
.floating.x = true,
|
|
.floating.y = true,
|
|
.floatTarget = {panel->rect.w - 10, 0}},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_FLOAT);
|
|
|
|
scrollBarY = ui_slider("scrollerY", thumbRatioY, &sliderY);
|
|
|
|
panel->scroll.y = sliderY * (contentsH - panel->rect.h);
|
|
if(sig.hovering)
|
|
{
|
|
ui_box_activate(scrollBarY);
|
|
}
|
|
}
|
|
panel->scroll.x = Clamp(panel->scroll.x, 0, contentsW - panel->rect.w);
|
|
panel->scroll.y = Clamp(panel->scroll.y, 0, contentsH - panel->rect.h);
|
|
|
|
ui_box_end();
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// tooltips
|
|
//------------------------------------------------------------------------------
|
|
|
|
ui_sig ui_tooltip_begin(const char* name)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
vec2 p = ui_mouse_position();
|
|
|
|
ui_style style = {.size.width = {UI_SIZE_CHILDREN},
|
|
.size.height = {UI_SIZE_CHILDREN},
|
|
.floating.x = true,
|
|
.floating.y = true,
|
|
.floatTarget = {p.x, p.y}};
|
|
ui_style_mask mask = UI_STYLE_SIZE | UI_STYLE_FLOAT;
|
|
|
|
ui_style_next(&style, mask);
|
|
|
|
ui_flags flags = UI_FLAG_OVERLAY
|
|
| UI_FLAG_DRAW_BACKGROUND
|
|
| UI_FLAG_DRAW_BORDER;
|
|
|
|
ui_box* tooltip = ui_box_make(name, flags);
|
|
ui_box_push(tooltip);
|
|
|
|
return(ui_box_sig(tooltip));
|
|
}
|
|
|
|
void ui_tooltip_end(void)
|
|
{
|
|
ui_box_pop(); // tooltip
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Menus
|
|
//------------------------------------------------------------------------------
|
|
|
|
void ui_menu_bar_begin(const char* name)
|
|
{
|
|
ui_style style = {.size.width = {UI_SIZE_PARENT, 1, 0},
|
|
.size.height = {UI_SIZE_CHILDREN},
|
|
.layout.axis = UI_AXIS_X,
|
|
.layout.spacing = 20,};
|
|
ui_style_mask mask = UI_STYLE_SIZE
|
|
| UI_STYLE_LAYOUT_AXIS
|
|
| UI_STYLE_LAYOUT_SPACING;
|
|
|
|
ui_style_next(&style, mask);
|
|
ui_box* bar = ui_box_begin(name, UI_FLAG_DRAW_BACKGROUND);
|
|
|
|
ui_sig sig = ui_box_sig(bar);
|
|
ui_context* ui = ui_get_context();
|
|
if(!sig.hovering && mp_mouse_released(&ui->input, MP_MOUSE_LEFT))
|
|
{
|
|
ui_box_deactivate(bar);
|
|
}
|
|
}
|
|
|
|
void ui_menu_bar_end(void)
|
|
{
|
|
ui_box_end(); // menu bar
|
|
}
|
|
|
|
void ui_menu_begin(const char* label)
|
|
{
|
|
ui_box* container = ui_box_make(label, 0);
|
|
ui_box_push(container);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_TEXT},
|
|
.size.height = {UI_SIZE_TEXT}},
|
|
UI_STYLE_SIZE);
|
|
|
|
ui_box* button = ui_box_make(label, UI_FLAG_CLICKABLE | UI_FLAG_DRAW_TEXT);
|
|
ui_box* bar = container->parent;
|
|
|
|
ui_sig sig = ui_box_sig(button);
|
|
ui_sig barSig = ui_box_sig(bar);
|
|
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_style style = {.size.width = {UI_SIZE_CHILDREN},
|
|
.size.height = {UI_SIZE_CHILDREN},
|
|
.floating.x = true,
|
|
.floating.y = true,
|
|
.floatTarget = {button->rect.x,
|
|
button->rect.y + button->rect.h},
|
|
.layout.axis = UI_AXIS_Y,
|
|
.layout.spacing = 5,
|
|
.layout.margin.x = 0,
|
|
.layout.margin.y = 5,
|
|
.bgColor = {0.2, 0.2, 0.2, 1}};
|
|
|
|
ui_style_mask mask = UI_STYLE_SIZE
|
|
| UI_STYLE_FLOAT
|
|
| UI_STYLE_LAYOUT
|
|
| UI_STYLE_BG_COLOR;
|
|
|
|
ui_flags flags = UI_FLAG_OVERLAY
|
|
| UI_FLAG_DRAW_BACKGROUND
|
|
| UI_FLAG_DRAW_BORDER;
|
|
|
|
ui_style_next(&style, mask);
|
|
ui_box* menu = ui_box_make("panel", flags);
|
|
|
|
if(ui_box_active(bar))
|
|
{
|
|
if(sig.hovering)
|
|
{
|
|
ui_box_activate(button);
|
|
}
|
|
else if(barSig.hovering)
|
|
{
|
|
ui_box_deactivate(button);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
ui_box_deactivate(button);
|
|
if(sig.pressed)
|
|
{
|
|
ui_box_activate(bar);
|
|
ui_box_activate(button);
|
|
}
|
|
}
|
|
|
|
ui_box_set_closed(menu, !ui_box_active(button));
|
|
ui_box_push(menu);
|
|
}
|
|
|
|
void ui_menu_end(void)
|
|
{
|
|
ui_box_pop(); // menu
|
|
ui_box_pop(); // container
|
|
}
|
|
|
|
ui_sig ui_menu_button(const char* name)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_TEXT},
|
|
.size.height = {UI_SIZE_TEXT},
|
|
.layout.margin.x = 5,
|
|
.bgColor = {0, 0, 0, 0}},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_LAYOUT_MARGIN_X
|
|
|UI_STYLE_BG_COLOR);
|
|
|
|
ui_pattern pattern = {0};
|
|
ui_pattern_push(&ui->frameArena, &pattern, (ui_selector){.kind = UI_SEL_STATUS, .status = UI_HOVER});
|
|
|
|
ui_style style = {.bgColor = {0, 0, 1, 1}};
|
|
ui_style_mask mask = UI_STYLE_BG_COLOR;
|
|
ui_style_match_before(pattern, &style, mask);
|
|
|
|
ui_flags flags = UI_FLAG_CLICKABLE
|
|
| UI_FLAG_CLIP
|
|
| UI_FLAG_DRAW_TEXT
|
|
| UI_FLAG_DRAW_BACKGROUND;
|
|
|
|
ui_box* box = ui_box_make(name, flags);
|
|
ui_sig sig = ui_box_sig(box);
|
|
return(sig);
|
|
}
|
|
|
|
void ui_select_popup_draw_arrow(ui_box* box, void* data)
|
|
{
|
|
f32 r = minimum(box->parent->style.roundness, box->rect.w);
|
|
f32 cr = r*4*(sqrt(2)-1)/3;
|
|
|
|
mg_move_to(box->rect.x, box->rect.y);
|
|
mg_line_to(box->rect.x + box->rect.w - r, box->rect.y);
|
|
mg_cubic_to(box->rect.x + box->rect.w - cr, box->rect.y,
|
|
box->rect.x + box->rect.w, box->rect.y + cr,
|
|
box->rect.x + box->rect.w, box->rect.y + r);
|
|
mg_line_to(box->rect.x + box->rect.w, box->rect.y + box->rect.h - r);
|
|
mg_cubic_to(box->rect.x + box->rect.w, box->rect.y + box->rect.h - cr,
|
|
box->rect.x + box->rect.w - cr, box->rect.y + box->rect.h,
|
|
box->rect.x + box->rect.w - r, box->rect.y + box->rect.h);
|
|
mg_line_to(box->rect.x, box->rect.y + box->rect.h);
|
|
|
|
mg_set_color(box->style.bgColor);
|
|
mg_fill();
|
|
|
|
mg_move_to(box->rect.x + 0.25*box->rect.w, box->rect.y + 0.45*box->rect.h);
|
|
mg_line_to(box->rect.x + 0.5*box->rect.w, box->rect.y + 0.75*box->rect.h);
|
|
mg_line_to(box->rect.x + 0.75*box->rect.w, box->rect.y + 0.45*box->rect.h);
|
|
mg_close_path();
|
|
|
|
mg_set_color(box->style.color);
|
|
mg_fill();
|
|
}
|
|
|
|
ui_select_popup_info ui_select_popup(const char* name, ui_select_popup_info* info)
|
|
{
|
|
ui_select_popup_info result = *info;
|
|
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_container(name, 0)
|
|
{
|
|
ui_box* button = ui_box_make("button",
|
|
UI_FLAG_CLICKABLE
|
|
|UI_FLAG_DRAW_BACKGROUND
|
|
|UI_FLAG_DRAW_BORDER
|
|
|UI_FLAG_ALLOW_OVERFLOW_X
|
|
|UI_FLAG_CLIP);
|
|
|
|
f32 maxOptionWidth = 0;
|
|
f32 lineHeight = 0;
|
|
mp_rect bbox = {0};
|
|
for(int i=0; i<info->optionCount; i++)
|
|
{
|
|
bbox = mg_text_bounding_box(button->style.font, button->style.fontSize, info->options[i]);
|
|
maxOptionWidth = maximum(maxOptionWidth, bbox.w);
|
|
}
|
|
f32 buttonWidth = maxOptionWidth + 2*button->style.layout.margin.x + button->rect.h;
|
|
|
|
ui_style_box_before(button,
|
|
ui_pattern_owner(),
|
|
&(ui_style){.size.width = {UI_SIZE_PIXELS, buttonWidth},
|
|
.size.height = {UI_SIZE_CHILDREN},
|
|
.layout.margin.x = 5,
|
|
.layout.margin.y = 1,
|
|
.roundness = 5,
|
|
.borderSize = 1,
|
|
.borderColor = {0.3, 0.3, 0.3, 1}},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_LAYOUT_MARGIN_X
|
|
|UI_STYLE_LAYOUT_MARGIN_Y
|
|
|UI_STYLE_ROUNDNESS
|
|
|UI_STYLE_BORDER_SIZE
|
|
|UI_STYLE_BORDER_COLOR);
|
|
ui_box_push(button);
|
|
{
|
|
ui_label_str8(info->options[info->selectedIndex]);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, button->rect.h},
|
|
.size.height = {UI_SIZE_PIXELS, button->rect.h},
|
|
.floating.x = true,
|
|
.floating.y = true,
|
|
.floatTarget = {button->rect.w - button->rect.h, 0},
|
|
.color = {0, 0, 0, 1},
|
|
.bgColor = {0.7, 0.7, 0.7, 1}},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_FLOAT
|
|
|UI_STYLE_COLOR
|
|
|UI_STYLE_BG_COLOR);
|
|
|
|
ui_box* arrow = ui_box_make("arrow", UI_FLAG_DRAW_PROC);
|
|
ui_box_set_draw_proc(arrow, ui_select_popup_draw_arrow, 0);
|
|
|
|
} ui_box_pop();
|
|
|
|
//panel
|
|
ui_box* panel = ui_box_make("panel",
|
|
UI_FLAG_DRAW_BACKGROUND
|
|
|UI_FLAG_BLOCK_MOUSE
|
|
|UI_FLAG_OVERLAY);
|
|
|
|
//TODO: set width to max(button.w, max child...)
|
|
f32 containerWidth = maximum(maxOptionWidth + 2*panel->style.layout.margin.x,
|
|
button->rect.w);
|
|
|
|
ui_style_box_before(panel,
|
|
ui_pattern_owner(),
|
|
&(ui_style){.size.width = {UI_SIZE_PIXELS, containerWidth},
|
|
.size.height = {UI_SIZE_CHILDREN},
|
|
.floating.x = true,
|
|
.floating.y = true,
|
|
.floatTarget = {button->rect.x,
|
|
button->rect.y + button->rect.h},
|
|
.layout.axis = UI_AXIS_Y,
|
|
.layout.margin.x = 0,
|
|
.layout.margin.y = 5,
|
|
.bgColor = {0.2, 0.2, 0.2, 1}},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_FLOAT
|
|
|UI_STYLE_LAYOUT
|
|
|UI_STYLE_BG_COLOR);
|
|
|
|
ui_box_push(panel);
|
|
{
|
|
for(int i=0; i<info->optionCount; i++)
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_TEXT},
|
|
.layout.axis = UI_AXIS_Y,
|
|
.layout.align.x = UI_ALIGN_START,
|
|
.layout.margin.x = 5,
|
|
.layout.margin.y = 2.5},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_LAYOUT_AXIS
|
|
|UI_STYLE_LAYOUT_ALIGN_X
|
|
|UI_STYLE_LAYOUT_MARGIN_X
|
|
|UI_STYLE_LAYOUT_MARGIN_Y);
|
|
|
|
|
|
ui_pattern pattern = {0};
|
|
ui_pattern_push(&ui->frameArena, &pattern, (ui_selector){.kind = UI_SEL_STATUS, .status = UI_HOVER});
|
|
ui_style_match_before(pattern, &(ui_style){.bgColor = {0, 0, 1, 1}}, UI_STYLE_BG_COLOR);
|
|
|
|
ui_box* box = ui_box_make_str8(info->options[i],
|
|
UI_FLAG_DRAW_TEXT
|
|
|UI_FLAG_CLICKABLE
|
|
|UI_FLAG_DRAW_BACKGROUND);
|
|
ui_sig sig = ui_box_sig(box);
|
|
if(sig.pressed)
|
|
{
|
|
result.selectedIndex = i;
|
|
}
|
|
}
|
|
}
|
|
ui_box_pop();
|
|
|
|
ui_context* ui = ui_get_context();
|
|
if(ui_box_active(panel) && mp_mouse_pressed(&ui->input, MP_MOUSE_LEFT))
|
|
{
|
|
ui_box_deactivate(panel);
|
|
}
|
|
else if(ui_box_sig(button).pressed)
|
|
{
|
|
ui_box_activate(panel);
|
|
}
|
|
ui_box_set_closed(panel, !ui_box_active(panel));
|
|
}
|
|
return(result);
|
|
}
|
|
|
|
//------------------------------------------------------------------------------
|
|
// text box
|
|
//------------------------------------------------------------------------------
|
|
str32 ui_edit_replace_selection_with_codepoints(ui_context* ui, str32 codepoints, str32 input)
|
|
{
|
|
u32 start = minimum(ui->editCursor, ui->editMark);
|
|
u32 end = maximum(ui->editCursor, ui->editMark);
|
|
|
|
str32 before = str32_slice(codepoints, 0, start);
|
|
str32 after = str32_slice(codepoints, end, codepoints.len);
|
|
|
|
str32_list list = {0};
|
|
str32_list_push(&ui->frameArena, &list, before);
|
|
str32_list_push(&ui->frameArena, &list, input);
|
|
str32_list_push(&ui->frameArena, &list, after);
|
|
|
|
codepoints = str32_list_join(&ui->frameArena, list);
|
|
|
|
ui->editCursor = start + input.len;
|
|
ui->editMark = ui->editCursor;
|
|
return(codepoints);
|
|
}
|
|
|
|
str32 ui_edit_delete_selection(ui_context* ui, str32 codepoints)
|
|
{
|
|
return(ui_edit_replace_selection_with_codepoints(ui, codepoints, (str32){0}));
|
|
}
|
|
|
|
void ui_edit_copy_selection_to_clipboard(ui_context* ui, str32 codepoints)
|
|
{
|
|
if(ui->editCursor == ui->editMark)
|
|
{
|
|
return;
|
|
}
|
|
u32 start = minimum(ui->editCursor, ui->editMark);
|
|
u32 end = maximum(ui->editCursor, ui->editMark);
|
|
str32 selection = str32_slice(codepoints, start, end);
|
|
str8 string = utf8_push_from_codepoints(&ui->frameArena, selection);
|
|
|
|
mp_clipboard_clear();
|
|
mp_clipboard_set_string(string);
|
|
}
|
|
|
|
str32 ui_edit_replace_selection_with_clipboard(ui_context* ui, str32 codepoints)
|
|
{
|
|
str8 string = mp_clipboard_get_string(&ui->frameArena);
|
|
str32 input = utf8_push_to_codepoints(&ui->frameArena, string);
|
|
str32 result = ui_edit_replace_selection_with_codepoints(ui, codepoints, input);
|
|
return(result);
|
|
}
|
|
|
|
typedef enum {
|
|
UI_EDIT_MOVE,
|
|
UI_EDIT_SELECT,
|
|
UI_EDIT_SELECT_EXTEND,
|
|
UI_EDIT_DELETE,
|
|
UI_EDIT_CUT,
|
|
UI_EDIT_COPY,
|
|
UI_EDIT_PASTE,
|
|
UI_EDIT_SELECT_ALL } ui_edit_op;
|
|
|
|
typedef enum {
|
|
UI_EDIT_MOVE_NONE = 0,
|
|
UI_EDIT_MOVE_ONE,
|
|
UI_EDIT_MOVE_WORD,
|
|
UI_EDIT_MOVE_LINE } ui_edit_move;
|
|
|
|
typedef struct ui_edit_command
|
|
{
|
|
mp_key_code key;
|
|
mp_keymod_flags mods;
|
|
|
|
ui_edit_op operation;
|
|
ui_edit_move move;
|
|
int direction;
|
|
|
|
} ui_edit_command;
|
|
|
|
#if PLATFORM_WIN64
|
|
#define OS_COPY_PASTE_MOD MP_KEYMOD_CTRL
|
|
#elif PLATFORM_MACOS
|
|
#define OS_COPY_PASTE_MOD MP_KEYMOD_CMD
|
|
#endif
|
|
|
|
const ui_edit_command UI_EDIT_COMMANDS[] = {
|
|
//NOTE(martin): move one left
|
|
{
|
|
.key = MP_KEY_LEFT,
|
|
.operation = UI_EDIT_MOVE,
|
|
.move = UI_EDIT_MOVE_ONE,
|
|
.direction = -1
|
|
},
|
|
//NOTE(martin): move one right
|
|
{
|
|
.key = MP_KEY_RIGHT,
|
|
.operation = UI_EDIT_MOVE,
|
|
.move = UI_EDIT_MOVE_ONE,
|
|
.direction = 1
|
|
},
|
|
//NOTE(martin): move start
|
|
{
|
|
.key = MP_KEY_Q,
|
|
.mods = MP_KEYMOD_CTRL,
|
|
.operation = UI_EDIT_MOVE,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = -1
|
|
},
|
|
{
|
|
.key = MP_KEY_UP,
|
|
.operation = UI_EDIT_MOVE,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = -1
|
|
},
|
|
//NOTE(martin): move end
|
|
{
|
|
.key = MP_KEY_E,
|
|
.mods = MP_KEYMOD_CTRL,
|
|
.operation = UI_EDIT_MOVE,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = 1
|
|
},
|
|
{
|
|
.key = MP_KEY_DOWN,
|
|
.operation = UI_EDIT_MOVE,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = 1
|
|
},
|
|
//NOTE(martin): select one left
|
|
{
|
|
.key = MP_KEY_LEFT,
|
|
.mods = MP_KEYMOD_SHIFT,
|
|
.operation = UI_EDIT_SELECT,
|
|
.move = UI_EDIT_MOVE_ONE,
|
|
.direction = -1
|
|
},
|
|
//NOTE(martin): select one right
|
|
{
|
|
.key = MP_KEY_RIGHT,
|
|
.mods = MP_KEYMOD_SHIFT,
|
|
.operation = UI_EDIT_SELECT,
|
|
.move = UI_EDIT_MOVE_ONE,
|
|
.direction = 1
|
|
},
|
|
//NOTE(martin): extend select to start
|
|
{
|
|
.key = MP_KEY_Q,
|
|
.mods = MP_KEYMOD_CTRL | MP_KEYMOD_SHIFT,
|
|
.operation = UI_EDIT_SELECT_EXTEND,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = -1
|
|
},
|
|
{
|
|
.key = MP_KEY_UP,
|
|
.mods = MP_KEYMOD_SHIFT,
|
|
.operation = UI_EDIT_SELECT_EXTEND,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = -1
|
|
},
|
|
//NOTE(martin): extend select to end
|
|
{
|
|
.key = MP_KEY_E,
|
|
.mods = MP_KEYMOD_CTRL | MP_KEYMOD_SHIFT,
|
|
.operation = UI_EDIT_SELECT_EXTEND,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = 1
|
|
},
|
|
{
|
|
.key = MP_KEY_DOWN,
|
|
.mods = MP_KEYMOD_SHIFT,
|
|
.operation = UI_EDIT_SELECT_EXTEND,
|
|
.move = UI_EDIT_MOVE_LINE,
|
|
.direction = 1
|
|
},
|
|
//NOTE(martin): select all
|
|
{
|
|
.key = MP_KEY_Q,
|
|
.mods = OS_COPY_PASTE_MOD,
|
|
.operation = UI_EDIT_SELECT_ALL,
|
|
.move = UI_EDIT_MOVE_NONE
|
|
},
|
|
//NOTE(martin): delete
|
|
{
|
|
.key = MP_KEY_DELETE,
|
|
.operation = UI_EDIT_DELETE,
|
|
.move = UI_EDIT_MOVE_ONE,
|
|
.direction = 1
|
|
},
|
|
//NOTE(martin): backspace
|
|
{
|
|
.key = MP_KEY_BACKSPACE,
|
|
.operation = UI_EDIT_DELETE,
|
|
.move = UI_EDIT_MOVE_ONE,
|
|
.direction = -1
|
|
},
|
|
//NOTE(martin): cut
|
|
{
|
|
.key = MP_KEY_X,
|
|
.mods = OS_COPY_PASTE_MOD,
|
|
.operation = UI_EDIT_CUT,
|
|
.move = UI_EDIT_MOVE_NONE
|
|
},
|
|
//NOTE(martin): copy
|
|
{
|
|
.key = MP_KEY_C,
|
|
.mods = OS_COPY_PASTE_MOD,
|
|
.operation = UI_EDIT_COPY,
|
|
.move = UI_EDIT_MOVE_NONE
|
|
},
|
|
//NOTE(martin): paste
|
|
{
|
|
.key = MP_KEY_V,
|
|
.mods = OS_COPY_PASTE_MOD,
|
|
.operation = UI_EDIT_PASTE,
|
|
.move = UI_EDIT_MOVE_NONE
|
|
}
|
|
};
|
|
|
|
const u32 UI_EDIT_COMMAND_COUNT = sizeof(UI_EDIT_COMMANDS)/sizeof(ui_edit_command);
|
|
|
|
void ui_edit_perform_move(ui_context* ui, ui_edit_move move, int direction, u32 textLen)
|
|
{
|
|
switch(move)
|
|
{
|
|
case UI_EDIT_MOVE_NONE:
|
|
break;
|
|
|
|
case UI_EDIT_MOVE_ONE:
|
|
{
|
|
if(direction < 0 && ui->editCursor > 0)
|
|
{
|
|
ui->editCursor--;
|
|
}
|
|
else if(direction > 0 && ui->editCursor < textLen)
|
|
{
|
|
ui->editCursor++;
|
|
}
|
|
} break;
|
|
|
|
case UI_EDIT_MOVE_LINE:
|
|
{
|
|
if(direction < 0)
|
|
{
|
|
ui->editCursor = 0;
|
|
}
|
|
else if(direction > 0)
|
|
{
|
|
ui->editCursor = textLen;
|
|
}
|
|
} break;
|
|
|
|
case UI_EDIT_MOVE_WORD:
|
|
DEBUG_ASSERT(0, "not implemented yet");
|
|
break;
|
|
}
|
|
}
|
|
|
|
str32 ui_edit_perform_operation(ui_context* ui, ui_edit_op operation, ui_edit_move move, int direction, str32 codepoints)
|
|
{
|
|
switch(operation)
|
|
{
|
|
case UI_EDIT_MOVE:
|
|
{
|
|
//NOTE(martin): we place the cursor on the direction-most side of the selection
|
|
// before performing the move
|
|
u32 cursor = direction < 0 ?
|
|
minimum(ui->editCursor, ui->editMark) :
|
|
maximum(ui->editCursor, ui->editMark);
|
|
ui->editCursor = cursor;
|
|
|
|
if(ui->editCursor == ui->editMark || move != UI_EDIT_MOVE_ONE)
|
|
{
|
|
//NOTE: we special case move-one when there is a selection
|
|
// (just place the cursor at begining/end of selection)
|
|
ui_edit_perform_move(ui, move, direction, codepoints.len);
|
|
}
|
|
ui->editMark = ui->editCursor;
|
|
} break;
|
|
|
|
case UI_EDIT_SELECT:
|
|
{
|
|
ui_edit_perform_move(ui, move, direction, codepoints.len);
|
|
} break;
|
|
|
|
case UI_EDIT_SELECT_EXTEND:
|
|
{
|
|
if((direction > 0) != (ui->editCursor > ui->editMark))
|
|
{
|
|
u32 tmp = ui->editCursor;
|
|
ui->editCursor = ui->editMark;
|
|
ui->editMark = tmp;
|
|
}
|
|
ui_edit_perform_move(ui, move, direction, codepoints.len);
|
|
} break;
|
|
|
|
case UI_EDIT_DELETE:
|
|
{
|
|
if(ui->editCursor == ui->editMark)
|
|
{
|
|
ui_edit_perform_move(ui, move, direction, codepoints.len);
|
|
}
|
|
codepoints = ui_edit_delete_selection(ui, codepoints);
|
|
ui->editMark = ui->editCursor;
|
|
} break;
|
|
|
|
case UI_EDIT_CUT:
|
|
{
|
|
ui_edit_copy_selection_to_clipboard(ui, codepoints);
|
|
codepoints = ui_edit_delete_selection(ui, codepoints);
|
|
} break;
|
|
|
|
case UI_EDIT_COPY:
|
|
{
|
|
ui_edit_copy_selection_to_clipboard(ui, codepoints);
|
|
} break;
|
|
|
|
case UI_EDIT_PASTE:
|
|
{
|
|
codepoints = ui_edit_replace_selection_with_clipboard(ui, codepoints);
|
|
} break;
|
|
|
|
case UI_EDIT_SELECT_ALL:
|
|
{
|
|
ui->editCursor = 0;
|
|
ui->editMark = codepoints.len;
|
|
} break;
|
|
}
|
|
ui->editCursorBlinkStart = ui->frameTime;
|
|
|
|
return(codepoints);
|
|
}
|
|
|
|
void ui_text_box_render(ui_box* box, void* data)
|
|
{
|
|
str32 codepoints = *(str32*)data;
|
|
ui_context* ui = ui_get_context();
|
|
|
|
u32 firstDisplayedChar = 0;
|
|
if(ui_box_active(box))
|
|
{
|
|
firstDisplayedChar = ui->editFirstDisplayedChar;
|
|
}
|
|
|
|
ui_style* style = &box->style;
|
|
mg_font_extents extents = mg_font_get_scaled_extents(style->font, style->fontSize);
|
|
f32 lineHeight = extents.ascent + extents.descent;
|
|
|
|
str32 before = str32_slice(codepoints, 0, firstDisplayedChar);
|
|
mp_rect beforeBox = mg_text_bounding_box_utf32(style->font, style->fontSize, before);
|
|
|
|
f32 textMargin = 5; //TODO: make that configurable
|
|
|
|
f32 textX = textMargin + box->rect.x - beforeBox.w;
|
|
f32 textTop = box->rect.y + 0.5*(box->rect.h - lineHeight);
|
|
f32 textY = textTop + extents.ascent ;
|
|
|
|
if(box->active)
|
|
{
|
|
u32 selectStart = minimum(ui->editCursor, ui->editMark);
|
|
u32 selectEnd = maximum(ui->editCursor, ui->editMark);
|
|
|
|
str32 beforeSelect = str32_slice(codepoints, 0, selectStart);
|
|
mp_rect beforeSelectBox = mg_text_bounding_box_utf32(style->font, style->fontSize, beforeSelect);
|
|
beforeSelectBox.x += textX;
|
|
beforeSelectBox.y += textY;
|
|
|
|
if(selectStart != selectEnd)
|
|
{
|
|
str32 select = str32_slice(codepoints, selectStart, selectEnd);
|
|
str32 afterSelect = str32_slice(codepoints, selectEnd, codepoints.len);
|
|
mp_rect selectBox = mg_text_bounding_box_utf32(style->font, style->fontSize, select);
|
|
mp_rect afterSelectBox = mg_text_bounding_box_utf32(style->font, style->fontSize, afterSelect);
|
|
|
|
selectBox.x += beforeSelectBox.x + beforeSelectBox.w;
|
|
selectBox.y += textY;
|
|
|
|
mg_set_color_rgba(0, 0, 1, 1);
|
|
mg_rectangle_fill(selectBox.x, selectBox.y, selectBox.w, lineHeight);
|
|
|
|
mg_set_font(style->font);
|
|
mg_set_font_size(style->fontSize);
|
|
mg_set_color(style->color);
|
|
|
|
mg_move_to(textX, textY);
|
|
mg_codepoints_outlines(beforeSelect);
|
|
mg_fill();
|
|
|
|
mg_set_color_rgba(1, 1, 1, 1);
|
|
mg_codepoints_outlines(select);
|
|
mg_fill();
|
|
|
|
mg_set_color(style->color);
|
|
mg_codepoints_outlines(afterSelect);
|
|
mg_fill();
|
|
}
|
|
else
|
|
{
|
|
if(!((u64)(2*(ui->frameTime - ui->editCursorBlinkStart)) & 1))
|
|
{
|
|
f32 caretX = box->rect.x + textMargin - beforeBox.w + beforeSelectBox.w;
|
|
f32 caretY = textTop;
|
|
mg_set_color(style->color);
|
|
mg_rectangle_fill(caretX, caretY, 1, lineHeight);
|
|
}
|
|
mg_set_font(style->font);
|
|
mg_set_font_size(style->fontSize);
|
|
mg_set_color(style->color);
|
|
|
|
mg_move_to(textX, textY);
|
|
mg_codepoints_outlines(codepoints);
|
|
mg_fill();
|
|
}
|
|
}
|
|
else
|
|
{
|
|
mg_set_font(style->font);
|
|
mg_set_font_size(style->fontSize);
|
|
mg_set_color(style->color);
|
|
|
|
mg_move_to(textX, textY);
|
|
mg_codepoints_outlines(codepoints);
|
|
mg_fill();
|
|
}
|
|
}
|
|
|
|
ui_text_box_result ui_text_box(const char* name, mem_arena* arena, str8 text)
|
|
{
|
|
ui_context* ui = ui_get_context();
|
|
|
|
ui_text_box_result result = {.text = text};
|
|
|
|
ui_flags frameFlags = UI_FLAG_CLICKABLE
|
|
| UI_FLAG_DRAW_BACKGROUND
|
|
| UI_FLAG_DRAW_BORDER
|
|
| UI_FLAG_CLIP
|
|
| UI_FLAG_DRAW_PROC;
|
|
|
|
ui_box* frame = ui_box_make(name, frameFlags);
|
|
ui_style* style = &frame->style;
|
|
f32 textMargin = 5; //TODO parameterize this margin! must be the same as in ui_text_box_render
|
|
|
|
mg_font_extents extents = mg_font_get_scaled_extents(style->font, style->fontSize);
|
|
|
|
ui_sig sig = ui_box_sig(frame);
|
|
|
|
if(sig.hovering)
|
|
{
|
|
ui_box_set_hot(frame, true);
|
|
|
|
if(sig.pressed)
|
|
{
|
|
if(!ui_box_active(frame))
|
|
{
|
|
ui_box_activate(frame);
|
|
|
|
//NOTE: focus
|
|
ui->focus = frame;
|
|
ui->editFirstDisplayedChar = 0;
|
|
ui->editCursor = 0;
|
|
ui->editMark = 0;
|
|
}
|
|
ui->editCursorBlinkStart = ui->frameTime;
|
|
}
|
|
|
|
if(sig.pressed || sig.dragging)
|
|
{
|
|
//NOTE: set cursor/extend selection on mouse press or drag
|
|
vec2 pos = ui_mouse_position();
|
|
f32 cursorX = pos.x - frame->rect.x - textMargin;
|
|
|
|
str32 codepoints = utf8_push_to_codepoints(&ui->frameArena, text);
|
|
i32 newCursor = codepoints.len;
|
|
f32 x = 0;
|
|
for(int i = ui->editFirstDisplayedChar; i<codepoints.len; i++)
|
|
{
|
|
mp_rect bbox = mg_text_bounding_box_utf32(style->font, style->fontSize, str32_slice(codepoints, i, i+1));
|
|
if(x + 0.5*bbox.w > cursorX)
|
|
{
|
|
newCursor = i;
|
|
break;
|
|
}
|
|
x += bbox.w;
|
|
}
|
|
//NOTE: put cursor the closest to new cursor (this maximizes the resulting selection,
|
|
// and seems to be the standard behaviour across a number of text editor)
|
|
if(abs(newCursor - ui->editCursor) > abs(newCursor - ui->editMark))
|
|
{
|
|
i32 tmp = ui->editCursor;
|
|
ui->editCursor = ui->editMark;
|
|
ui->editMark = tmp;
|
|
}
|
|
//NOTE: set the new cursor, and set or leave the mark depending on mode
|
|
ui->editCursor = newCursor;
|
|
if(sig.pressed && !(mp_key_mods(&ui->input) & MP_KEYMOD_SHIFT))
|
|
{
|
|
ui->editMark = ui->editCursor;
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
ui_box_set_hot(frame, false);
|
|
|
|
if(sig.pressed)
|
|
{
|
|
if(ui_box_active(frame))
|
|
{
|
|
ui_box_deactivate(frame);
|
|
|
|
//NOTE loose focus
|
|
ui->focus = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
if(ui_box_active(frame))
|
|
{
|
|
str32 oldCodepoints = utf8_push_to_codepoints(&ui->frameArena, text);
|
|
str32 codepoints = oldCodepoints;
|
|
ui->editCursor = Clamp(ui->editCursor, 0, codepoints.len);
|
|
ui->editMark = Clamp(ui->editMark, 0, codepoints.len);
|
|
|
|
//NOTE replace selection with input codepoints
|
|
str32 input = mp_input_text_utf32(&ui->input, &ui->frameArena);
|
|
if(input.len)
|
|
{
|
|
codepoints = ui_edit_replace_selection_with_codepoints(ui, codepoints, input);
|
|
ui->editCursorBlinkStart = ui->frameTime;
|
|
}
|
|
|
|
//NOTE handle shortcuts
|
|
mp_keymod_flags mods = mp_key_mods(&ui->input);
|
|
|
|
for(int i=0; i<UI_EDIT_COMMAND_COUNT; i++)
|
|
{
|
|
const ui_edit_command* command = &(UI_EDIT_COMMANDS[i]);
|
|
|
|
if( (mp_key_pressed(&ui->input, command->key) || mp_key_repeated(&ui->input, command->key))
|
|
&& mods == command->mods)
|
|
{
|
|
codepoints = ui_edit_perform_operation(ui, command->operation, command->move, command->direction, codepoints);
|
|
break;
|
|
}
|
|
}
|
|
|
|
//NOTE(martin): check changed/accepted
|
|
if(oldCodepoints.ptr != codepoints.ptr)
|
|
{
|
|
result.changed = true;
|
|
result.text = utf8_push_from_codepoints(arena, codepoints);
|
|
}
|
|
|
|
if(mp_key_pressed(&ui->input, MP_KEY_ENTER))
|
|
{
|
|
//TODO(martin): extract in gui_edit_complete() (and use below)
|
|
result.accepted = true;
|
|
ui_box_deactivate(frame);
|
|
ui->focus = 0;
|
|
}
|
|
|
|
//NOTE slide contents
|
|
{
|
|
if(ui->editCursor < ui->editFirstDisplayedChar)
|
|
{
|
|
ui->editFirstDisplayedChar = ui->editCursor;
|
|
}
|
|
else
|
|
{
|
|
i32 firstDisplayedChar = ui->editFirstDisplayedChar;
|
|
str32 firstToCursor = str32_slice(codepoints, firstDisplayedChar, ui->editCursor);
|
|
mp_rect firstToCursorBox = mg_text_bounding_box_utf32(style->font, style->fontSize, firstToCursor);
|
|
|
|
while(firstToCursorBox.w > (frame->rect.w - 2*textMargin))
|
|
{
|
|
firstDisplayedChar++;
|
|
firstToCursor = str32_slice(codepoints, firstDisplayedChar, ui->editCursor);
|
|
firstToCursorBox = mg_text_bounding_box_utf32(style->font, style->fontSize, firstToCursor);
|
|
}
|
|
|
|
ui->editFirstDisplayedChar = firstDisplayedChar;
|
|
}
|
|
}
|
|
|
|
//NOTE: set renderer
|
|
str32* renderCodepoints = mem_arena_alloc_type(&ui->frameArena, str32);
|
|
*renderCodepoints = str32_push_copy(&ui->frameArena, codepoints);
|
|
ui_box_set_draw_proc(frame, ui_text_box_render, renderCodepoints);
|
|
}
|
|
else
|
|
{
|
|
//NOTE: set renderer
|
|
str32* renderCodepoints = mem_arena_alloc_type(&ui->frameArena, str32);
|
|
*renderCodepoints = utf8_push_to_codepoints(&ui->frameArena, text);
|
|
ui_box_set_draw_proc(frame, ui_text_box_render, renderCodepoints);
|
|
}
|
|
|
|
return(result);
|
|
}
|