hmn
/
orca
5
Fork 2
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

[ui] first version of select popup menu

This commit is contained in:
Martin Fouilleul 2023-03-12 19:06:09 +01:00
parent 09951afa53
commit 9e41d2b6fc
6 changed files with 691 additions and 643 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

516
examples/ui/main.c
View File

@ -17,6 +17,138 @@
#define LOG_SUBSYSTEM "Main"
void debug_print_indent(int indent)
{
for(int i=0; i<indent; i++)
{
printf(" ");
}
}
void debug_print_rule(ui_style_rule* rule)
{
for_list(&rule->pattern.l, selector, ui_selector, listElt)
{
switch(selector->kind)
{
case UI_SEL_ANY:
printf("any: ");
break;
case UI_SEL_OWNER:
printf("owner: ");
break;
case UI_SEL_TEXT:
printf("text='%.*s': ", (int)selector->text.len, selector->text.ptr);
break;
case UI_SEL_TAG:
printf("tag=0x%llx: ", selector->tag.hash);
break;
case UI_SEL_STATUS:
{
if(selector->status & UI_HOVER)
{
printf("hover: ");
}
if(selector->status & UI_ACTIVE)
{
printf("active: ");
}
if(selector->status & UI_DRAGGING)
{
printf("dragging: ");
}
} break;
case UI_SEL_KEY:
printf("key=0x%llx: ", selector->key.hash);
break;
default:
printf("unknown: ");
break;
}
}
printf("=> font size = %f\n", rule->style->fontSize);
}
void debug_print_size(ui_box* box, ui_axis axis, int indent)
{
debug_print_indent(indent);
printf("size %s: ", axis == UI_AXIS_X ? "x" : "y");
f32 value = box->targetStyle->size.c[axis].value;
switch(box->targetStyle->size.c[axis].kind)
{
case UI_SIZE_TEXT:
printf("text\n");
break;
case UI_SIZE_CHILDREN:
printf("children\n");
break;
case UI_SIZE_PARENT:
printf("parent: %f\n", value);
break;
case UI_SIZE_PARENT_MINUS_PIXELS:
printf("parent minus pixels: %f\n", value);
break;
case UI_SIZE_PIXELS:
printf("pixels: %f\n", value);
break;
}
}
void debug_print_styles(ui_box* box, int indent)
{
debug_print_indent(indent);
printf("### box '%.*s'\n", (int)box->string.len, box->string.ptr);
indent++;
debug_print_indent(indent);
printf("font size: %f\n", box->targetStyle->fontSize);
debug_print_size(box, UI_AXIS_X, indent);
debug_print_size(box, UI_AXIS_Y, indent);
if(!list_empty(&box->beforeRules))
{
debug_print_indent(indent);
printf("before rules:\n");
for_list(&box->beforeRules, rule, ui_style_rule, boxElt)
{
debug_print_indent(indent+1);
debug_print_rule(rule);
}
}
if(!list_empty(&box->afterRules))
{
debug_print_indent(indent);
printf("after rules:\n");
for_list(&box->afterRules, rule, ui_style_rule, boxElt)
{
debug_print_indent(indent+1);
debug_print_rule(rule);
}
}
if(!list_empty(&box->children))
{
debug_print_indent(indent);
printf("children:\n");
indent++;
for_list(&box->children, child, ui_box, listElt)
{
debug_print_styles(child, indent);
}
}
}
mg_font create_font()
{
@ -50,6 +182,28 @@ mg_font create_font()
return(font);
}
void widget_begin_view(char* str)
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_Y,
.layout.spacing = 10,
.layout.margin.x = 10,
.layout.margin.y = 10,
.layout.align.x = UI_ALIGN_CENTER,
.layout.align.y = UI_ALIGN_START},
UI_STYLE_LAYOUT);
ui_box_begin(str, UI_FLAG_DRAW_BORDER);
ui_label(str);
}
void widget_end_view(void)
{
ui_box_end();
}
#define widget_view(s) defer_loop(widget_begin_view(s), widget_end_view())
int main()
{
LogLevel(LOG_LEVEL_WARNING);
@ -79,20 +233,17 @@ int main()
mg_font font = create_font();
mem_arena textArena = {0};
mem_arena_init(&textArena);
// start app
mp_window_bring_to_front(window);
mp_window_focus(window);
f32 x = 400, y = 300;
f32 speed = 0;
f32 dx = speed, dy = speed;
f64 frameTime = 0;
mem_arena textArena = {0};
mem_arena_init(&textArena);
while(!mp_should_quit())
{
bool printDebugStyle = false;
f64 startTime = mp_get_time(MP_CLOCK_MONOTONIC);
mp_pump_events(0);
@ -106,88 +257,343 @@ int main()
mp_request_quit();
} break;
case MP_EVENT_KEYBOARD_KEY:
{
if(event.key.action == MP_KEY_PRESS && event.key.code == MP_KEY_P)
{
printDebugStyle = true;
}
} break;
default:
break;
}
}
mg_surface_prepare(surface);
mp_rect frame = mp_window_get_content_rect(window);
ui_style defaultStyle = {.bgColor = {0.9, 0.9, 0.9, 1},
.borderSize = 2,
.borderColor = {0, 0, 1, 1},
.fontColor = {0, 0, 0, 1},
//TEST UI
ui_style defaultStyle = {.bgColor = {0},
.color = {1, 1, 1, 1},
.font = font,
.fontSize = 32};
.fontSize = 16,
.borderColor = {1, 0, 0, 1},
.borderSize = 2};
ui_frame(frame.w, frame.h, defaultStyle)
ui_style_mask defaultMask = UI_STYLE_BG_COLOR
| UI_STYLE_COLOR
| UI_STYLE_BORDER_COLOR
| UI_STYLE_BORDER_SIZE
| UI_STYLE_FONT
| UI_STYLE_FONT_SIZE;
ui_flags debugFlags = UI_FLAG_DRAW_BORDER;
ui_box* root = 0;
ui_frame(&defaultStyle, defaultMask)
{
ui_push_size(UI_AXIS_X, UI_SIZE_CHILDREN, 10, 0);
ui_push_size(UI_AXIS_Y, UI_SIZE_CHILDREN, 10, 0);
ui_panel("buttons")
root = ui_box_top();
ui_style_match_before(ui_pattern_all(), &defaultStyle, defaultMask);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 1},
.layout.axis = UI_AXIS_Y,
.layout.align.x = UI_ALIGN_CENTER,
.layout.align.y = UI_ALIGN_START,
.layout.spacing = 10,
.layout.margin.x = 10,
.layout.margin.y = 10,
.bgColor = {0.11, 0.11, 0.11, 1}},
UI_STYLE_SIZE
| UI_STYLE_LAYOUT
| UI_STYLE_BG_COLOR);
ui_container("background", UI_FLAG_DRAW_BACKGROUND)
{
ui_push_size(UI_AXIS_X, UI_SIZE_TEXT, 5, 0);
ui_push_size(UI_AXIS_Y, UI_SIZE_TEXT, 5, 0);
if(ui_button("1: Click me!").clicked)
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_CHILDREN},
.layout.align.x = UI_ALIGN_CENTER},
UI_STYLE_SIZE
|UI_STYLE_LAYOUT_ALIGN_X);
ui_container("title", debugFlags)
{
printf("Clicked button 1!\n");
ui_style_next(&(ui_style){.fontSize = 26}, UI_STYLE_FONT_SIZE);
ui_label("Milepost UI Demo");
if(ui_box_sig(ui_box_top()).hovering)
{
ui_tooltip("tooltip")
{
ui_style_next(&(ui_style){.bgColor = {1, 0.99, 0.82, 1}},
UI_STYLE_BG_COLOR);
ui_container("background", UI_FLAG_DRAW_BACKGROUND)
{
ui_style_next(&(ui_style){.color = {0, 0, 0, 1}},
UI_STYLE_COLOR);
ui_label("That is a tooltip!");
}
}
if(ui_button("2: Click me!").clicked)
{
printf("Clicked button 2!\n");
}
ui_pop_size(UI_AXIS_X);
ui_pop_size(UI_AXIS_Y);
}
ui_panel("sliders")
ui_menu_bar("Menu bar")
{
static float scrollValue1 = 0.;
static float scrollValue2 = 0.;
ui_push_size(UI_AXIS_X, UI_SIZE_PIXELS, 300, 1);
ui_push_size(UI_AXIS_Y, UI_SIZE_PIXELS, 50, 1);
ui_scrollbar("scroll1", 0.5, &scrollValue1);
ui_scrollbar("scroll2", 0.5, &scrollValue2);
ui_pop_size(UI_AXIS_X);
ui_pop_size(UI_AXIS_Y);
ui_menu("Menu 1")
{
if(ui_menu_button("Option 1.1").pressed)
{
printf("Pressed option 1.1\n");
}
ui_menu_button("Option 1.2");
ui_menu_button("Option 1.3");
ui_menu_button("Option 1.4");
}
ui_panel("textbox")
{
ui_push_size(UI_AXIS_X, UI_SIZE_PIXELS, 300, 0);
ui_push_size(UI_AXIS_Y, UI_SIZE_PIXELS, 50, 0);
static str8 text = {};
ui_menu("Menu 2")
{
ui_menu_button("Option 2.1");
ui_menu_button("Option 2.2");
ui_menu_button("Option 2.3");
ui_menu_button("Option 2.4");
}
ui_menu("Menu 3")
{
ui_menu_button("Option 3.1");
ui_menu_button("Option 3.2");
ui_menu_button("Option 3.3");
ui_menu_button("Option 3.4");
}
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 1, 1}},
UI_STYLE_SIZE);
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X}, UI_STYLE_LAYOUT_AXIS);
ui_container("contents", debugFlags)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1},
.borderColor = {0, 0, 1, 1}},
UI_STYLE_SIZE
|UI_STYLE_BORDER_COLOR);
ui_container("left", debugFlags)
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.layout.spacing = 10,
.layout.margin.x = 10,
.layout.margin.y = 10,
.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.5}},
UI_STYLE_LAYOUT_AXIS
|UI_STYLE_LAYOUT_SPACING
|UI_STYLE_LAYOUT_MARGIN_X
|UI_STYLE_LAYOUT_MARGIN_Y
|UI_STYLE_SIZE);
ui_container("up", debugFlags)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1}},
UI_STYLE_SIZE);
widget_view("Buttons")
{
ui_button("Button 1");
ui_button("Button 2");
ui_button("Button 3");
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1}},
UI_STYLE_SIZE);
ui_pattern pattern = {0};
ui_pattern_push(mem_scratch(), &pattern, (ui_selector){.kind = UI_SEL_TAG, .tag = ui_tag_make("checkbox")});
ui_style_match_after(pattern,
&(ui_style){.bgColor = {0, 1, 0, 1},
.color = {1, 1, 1, 1}},
UI_STYLE_COLOR | UI_STYLE_BG_COLOR);
widget_view("checkboxes")
{
static bool check1 = true;
static bool check2 = false;
static bool check3 = false;
ui_checkbox("check1", &check1);
ui_checkbox("check2", &check2);
ui_checkbox("check3", &check3);
}
}
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.5}},
UI_STYLE_LAYOUT_AXIS
|UI_STYLE_SIZE);
ui_container("down", debugFlags)
{
widget_view("Vertical Sliders")
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.layout.spacing = 10},
UI_STYLE_LAYOUT_AXIS
|UI_STYLE_LAYOUT_SPACING);
ui_container("contents", 0)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
.size.height = {UI_SIZE_PIXELS, 200}},
UI_STYLE_SIZE);
static f32 slider1 = 0;
ui_slider("slider1", 0.2, &slider1);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
.size.height = {UI_SIZE_PIXELS, 200}},
UI_STYLE_SIZE);
static f32 slider2 = 0;
ui_slider("slider2", 0.2, &slider2);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
.size.height = {UI_SIZE_PIXELS, 200}},
UI_STYLE_SIZE);
static f32 slider3 = 0;
ui_slider("slider3", 0.2, &slider3);
}
}
widget_view("Horizontal Sliders")
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
.size.height = {UI_SIZE_PIXELS, 20}},
UI_STYLE_SIZE);
static f32 slider1 = 0;
ui_slider("slider1", 0.2, &slider1);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
.size.height = {UI_SIZE_PIXELS, 20}},
UI_STYLE_SIZE);
static f32 slider2 = 0;
ui_slider("slider2", 0.2, &slider2);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
.size.height = {UI_SIZE_PIXELS, 20}},
UI_STYLE_SIZE);
static f32 slider3 = 0;
ui_slider("slider3", 0.2, &slider3);
}
}
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1}},
UI_STYLE_SIZE);
ui_container("right", debugFlags)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.33}},
UI_STYLE_SIZE);
widget_view("Text box")
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 300},
.size.height = {UI_SIZE_TEXT}},
UI_STYLE_SIZE);
static str8 text = {0};
ui_text_box_result res = ui_text_box("textbox", mem_scratch(), text);
if(res.changed)
{
mem_arena_clear(&textArena);
text = str8_push_copy(&textArena, res.text);
}
}
ui_pop_size(UI_AXIS_X);
ui_pop_size(UI_AXIS_Y);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.33}},
UI_STYLE_SIZE);
widget_view("Test")
{
static int selected = 0;
str8 options[] = {STR8("option 1"),
STR8("option 2"),
STR8("long option 3"),
STR8("option 4"),
STR8("option 5")};
ui_select_popup_info info = {.selectedIndex = selected,
.optionCount = 5,
.options = options};
ui_select_popup_info result = ui_select_popup("popup", &info);
selected = result.selectedIndex;
}
ui_pop_size(UI_AXIS_X);
ui_pop_size(UI_AXIS_Y);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.33}},
UI_STYLE_SIZE);
widget_view("Color")
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.7},
.layout.axis = UI_AXIS_X},
UI_STYLE_SIZE
|UI_STYLE_LAYOUT_AXIS);
ui_panel("Panel", UI_FLAG_DRAW_BORDER)
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X},
UI_STYLE_LAYOUT_AXIS);
ui_container("contents", 0)
{
ui_style_next(&(ui_style){.layout.spacing = 20},
UI_STYLE_LAYOUT_SPACING);
ui_container("buttons", 0)
{
ui_button("Button A");
ui_button("Button B");
ui_button("Button C");
ui_button("Button D");
}
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.layout.spacing = 20},
UI_STYLE_LAYOUT_SPACING
|UI_STYLE_LAYOUT_AXIS);
ui_container("buttons2", 0)
{
ui_button("Button A");
ui_button("Button B");
ui_button("Button C");
ui_button("Button D");
}
}
}
}
}
}
}
}
if(printDebugStyle)
{
debug_print_styles(root, 0);
}
mg_surface_prepare(surface);
ui_draw();
mg_flush();
mg_surface_present(surface);
mem_arena_clear(mem_scratch());
frameTime = mp_get_time(MP_CLOCK_MONOTONIC) - startTime;
}
mg_font_destroy(font);
mg_canvas_destroy(canvas);
mg_surface_destroy(surface);
mp_window_destroy(window);
mp_terminate();
return(0);

4
examples/ui_style_test/build.bat
View File

@ -1,4 +0,0 @@
set INCLUDES=/I ..\..\src /I ..\..\src\util /I ..\..\src\platform /I ../../ext /I ../../ext/angle_headers
cl /we4013 /Zi /Zc:preprocessor /std:c11 %INCLUDES% main.c /link /LIBPATH:../../bin milepost.dll.lib /out:../../bin/test_ui.exe

11
examples/ui_style_test/build.sh
View File

@ -1,11 +0,0 @@
#!/bin/bash
BINDIR=../../bin
RESDIR=../../resources
SRCDIR=../../src
INCLUDES="-I$SRCDIR -I$SRCDIR/util -I$SRCDIR/platform -I$SRCDIR/app"
LIBS="-L$BINDIR -lmilepost"
FLAGS="-mmacos-version-min=10.15.4 -DDEBUG -DLOG_COMPILE_DEBUG"
clang -g $FLAGS $LIBS $INCLUDES -o $BINDIR/test_ui main.c

561
examples/ui_style_test/main.c
View File

@ -1,561 +0,0 @@
/************************************************************//**
*
* @file: main.cpp
* @author: Martin Fouilleul
* @date: 30/07/2022
* @revision:
*
*****************************************************************/
#include<stdlib.h>
#include<string.h>
#include<errno.h>
#define _USE_MATH_DEFINES //NOTE: necessary for MSVC
#include<math.h>
#include"milepost.h"
#define LOG_SUBSYSTEM "Main"
void debug_print_indent(int indent)
{
for(int i=0; i<indent; i++)
{
printf(" ");
}
}
void debug_print_rule(ui_style_rule* rule)
{
for_list(&rule->pattern.l, selector, ui_selector, listElt)
{
switch(selector->kind)
{
case UI_SEL_ANY:
printf("any: ");
break;
case UI_SEL_OWNER:
printf("owner: ");
break;
case UI_SEL_TEXT:
printf("text='%.*s': ", (int)selector->text.len, selector->text.ptr);
break;
case UI_SEL_TAG:
printf("tag=0x%llx: ", selector->tag.hash);
break;
case UI_SEL_STATUS:
{
if(selector->status & UI_HOVER)
{
printf("hover: ");
}
if(selector->status & UI_ACTIVE)
{
printf("active: ");
}
if(selector->status & UI_DRAGGING)
{
printf("dragging: ");
}
} break;
case UI_SEL_KEY:
printf("key=0x%llx: ", selector->key.hash);
break;
default:
printf("unknown: ");
break;
}
}
printf("=> font size = %f\n", rule->style->fontSize);
}
void debug_print_size(ui_box* box, ui_axis axis, int indent)
{
debug_print_indent(indent);
printf("size %s: ", axis == UI_AXIS_X ? "x" : "y");
f32 value = box->targetStyle->size.c[axis].value;
switch(box->targetStyle->size.c[axis].kind)
{
case UI_SIZE_TEXT:
printf("text\n");
break;
case UI_SIZE_CHILDREN:
printf("children\n");
break;
case UI_SIZE_PARENT:
printf("parent: %f\n", value);
break;
case UI_SIZE_PARENT_MINUS_PIXELS:
printf("parent minus pixels: %f\n", value);
break;
case UI_SIZE_PIXELS:
printf("pixels: %f\n", value);
break;
}
}
void debug_print_styles(ui_box* box, int indent)
{
debug_print_indent(indent);
printf("### box '%.*s'\n", (int)box->string.len, box->string.ptr);
indent++;
debug_print_indent(indent);
printf("font size: %f\n", box->targetStyle->fontSize);
debug_print_size(box, UI_AXIS_X, indent);
debug_print_size(box, UI_AXIS_Y, indent);
if(!list_empty(&box->beforeRules))
{
debug_print_indent(indent);
printf("before rules:\n");
for_list(&box->beforeRules, rule, ui_style_rule, boxElt)
{
debug_print_indent(indent+1);
debug_print_rule(rule);
}
}
if(!list_empty(&box->afterRules))
{
debug_print_indent(indent);
printf("after rules:\n");
for_list(&box->afterRules, rule, ui_style_rule, boxElt)
{
debug_print_indent(indent+1);
debug_print_rule(rule);
}
}
if(!list_empty(&box->children))
{
debug_print_indent(indent);
printf("children:\n");
indent++;
for_list(&box->children, child, ui_box, listElt)
{
debug_print_styles(child, indent);
}
}
}
mg_font create_font()
{
//NOTE(martin): create font
str8 fontPath = mp_app_get_resource_path(mem_scratch(), "../resources/OpenSansLatinSubset.ttf");
char* fontPathCString = str8_to_cstring(mem_scratch(), fontPath);
FILE* fontFile = fopen(fontPathCString, "r");
if(!fontFile)
{
LOG_ERROR("Could not load font file '%s': %s\n", fontPathCString, strerror(errno));
return(mg_font_nil());
}
unsigned char* fontData = 0;
fseek(fontFile, 0, SEEK_END);
u32 fontDataSize = ftell(fontFile);
rewind(fontFile);
fontData = (unsigned char*)malloc(fontDataSize);
fread(fontData, 1, fontDataSize, fontFile);
fclose(fontFile);
unicode_range ranges[5] = {UNICODE_RANGE_BASIC_LATIN,
UNICODE_RANGE_C1_CONTROLS_AND_LATIN_1_SUPPLEMENT,
UNICODE_RANGE_LATIN_EXTENDED_A,
UNICODE_RANGE_LATIN_EXTENDED_B,
UNICODE_RANGE_SPECIALS};
mg_font font = mg_font_create_from_memory(fontDataSize, fontData, 5, ranges);
free(fontData);
return(font);
}
void widget_begin_view(char* str)
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_Y,
.layout.spacing = 10,
.layout.margin.x = 10,
.layout.margin.y = 10,
.layout.align.x = UI_ALIGN_CENTER,
.layout.align.y = UI_ALIGN_START},
UI_STYLE_LAYOUT);
ui_box_begin(str, UI_FLAG_DRAW_BORDER);
ui_label(str);
}
void widget_end_view(void)
{
ui_box_end();
}
#define widget_view(s) defer_loop(widget_begin_view(s), widget_end_view())
int main()
{
LogLevel(LOG_LEVEL_WARNING);
mp_init();
mp_clock_init(); //TODO put that in mp_init()?
ui_init();
mp_rect windowRect = {.x = 100, .y = 100, .w = 810, .h = 610};
mp_window window = mp_window_create(windowRect, "test", 0);
mp_rect contentRect = mp_window_get_content_rect(window);
//NOTE: create surface
mg_surface surface = mg_surface_create_for_window(window, MG_BACKEND_DEFAULT);
mg_surface_swap_interval(surface, 0);
//TODO: create canvas
mg_canvas canvas = mg_canvas_create(surface);
if(mg_canvas_is_nil(canvas))
{
printf("Error: couldn't create canvas\n");
return(-1);
}
mg_font font = create_font();
mem_arena textArena = {0};
mem_arena_init(&textArena);
// start app
mp_window_bring_to_front(window);
mp_window_focus(window);
while(!mp_should_quit())
{
bool printDebugStyle = false;
f64 startTime = mp_get_time(MP_CLOCK_MONOTONIC);
mp_pump_events(0);
mp_event event = {0};
while(mp_next_event(&event))
{
switch(event.type)
{
case MP_EVENT_WINDOW_CLOSE:
{
mp_request_quit();
} break;
case MP_EVENT_KEYBOARD_KEY:
{
if(event.key.action == MP_KEY_PRESS && event.key.code == MP_KEY_P)
{
printDebugStyle = true;
}
} break;
default:
break;
}
}
//TEST UI
ui_style defaultStyle = {.bgColor = {0},
.color = {1, 1, 1, 1},
.font = font,
.fontSize = 16,
.borderColor = {1, 0, 0, 1},
.borderSize = 2};
ui_style_mask defaultMask = UI_STYLE_BG_COLOR
| UI_STYLE_COLOR
| UI_STYLE_BORDER_COLOR
| UI_STYLE_BORDER_SIZE
| UI_STYLE_FONT
| UI_STYLE_FONT_SIZE;
ui_flags debugFlags = UI_FLAG_DRAW_BORDER;
ui_box* root = 0;
ui_frame(&defaultStyle, defaultMask)
{
root = ui_box_top();
ui_style_match_before(ui_pattern_all(), &defaultStyle, defaultMask);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 1},
.layout.axis = UI_AXIS_Y,
.layout.align.x = UI_ALIGN_CENTER,
.layout.align.y = UI_ALIGN_START,
.layout.spacing = 10,
.layout.margin.x = 10,
.layout.margin.y = 10,
.bgColor = {0.11, 0.11, 0.11, 1}},
UI_STYLE_SIZE
| UI_STYLE_LAYOUT
| UI_STYLE_BG_COLOR);
ui_container("background", UI_FLAG_DRAW_BACKGROUND)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_CHILDREN},
.layout.align.x = UI_ALIGN_CENTER},
UI_STYLE_SIZE
|UI_STYLE_LAYOUT_ALIGN_X);
ui_container("title", debugFlags)
{
ui_style_next(&(ui_style){.fontSize = 26}, UI_STYLE_FONT_SIZE);
ui_label("Milepost UI Demo");
if(ui_box_sig(ui_box_top()).hovering)
{
ui_tooltip("tooltip")
{
ui_label("That is a tooltip!");
}
}
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 1, 1}},
UI_STYLE_SIZE);
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X}, UI_STYLE_LAYOUT_AXIS);
ui_container("contents", debugFlags)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1},
.borderColor = {0, 0, 1, 1}},
UI_STYLE_SIZE
|UI_STYLE_BORDER_COLOR);
ui_container("left", debugFlags)
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.layout.spacing = 10,
.layout.margin.x = 10,
.layout.margin.y = 10,
.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.5}},
UI_STYLE_LAYOUT_AXIS
|UI_STYLE_LAYOUT_SPACING
|UI_STYLE_LAYOUT_MARGIN_X
|UI_STYLE_LAYOUT_MARGIN_Y
|UI_STYLE_SIZE);
ui_container("up", debugFlags)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1}},
UI_STYLE_SIZE);
widget_view("Buttons")
{
ui_button("Button 1");
ui_button("Button 2");
ui_button("Button 3");
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1}},
UI_STYLE_SIZE);
widget_view("checkboxes")
{
static bool check1 = true;
static bool check2 = false;
static bool check3 = false;
ui_checkbox("check1", &check1);
ui_checkbox("check2", &check2);
ui_checkbox("check3", &check3);
}
}
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.5}},
UI_STYLE_LAYOUT_AXIS
|UI_STYLE_SIZE);
ui_container("down", debugFlags)
{
widget_view("Vertical Sliders")
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.layout.spacing = 10},
UI_STYLE_LAYOUT_AXIS
|UI_STYLE_LAYOUT_SPACING);
ui_container("contents", 0)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
.size.height = {UI_SIZE_PIXELS, 200}},
UI_STYLE_SIZE);
static f32 slider1 = 0;
ui_slider("slider1", 0.2, &slider1);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
.size.height = {UI_SIZE_PIXELS, 200}},
UI_STYLE_SIZE);
static f32 slider2 = 0;
ui_slider("slider2", 0.2, &slider2);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
.size.height = {UI_SIZE_PIXELS, 200}},
UI_STYLE_SIZE);
static f32 slider3 = 0;
ui_slider("slider3", 0.2, &slider3);
}
}
widget_view("Horizontal Sliders")
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
.size.height = {UI_SIZE_PIXELS, 20}},
UI_STYLE_SIZE);
static f32 slider1 = 0;
ui_slider("slider1", 0.2, &slider1);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
.size.height = {UI_SIZE_PIXELS, 20}},
UI_STYLE_SIZE);
static f32 slider2 = 0;
ui_slider("slider2", 0.2, &slider2);
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
.size.height = {UI_SIZE_PIXELS, 20}},
UI_STYLE_SIZE);
static f32 slider3 = 0;
ui_slider("slider3", 0.2, &slider3);
}
}
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
.size.height = {UI_SIZE_PARENT, 1}},
UI_STYLE_SIZE);
ui_container("right", debugFlags)
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.33}},
UI_STYLE_SIZE);
widget_view("Text box")
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 300},
.size.height = {UI_SIZE_TEXT}},
UI_STYLE_SIZE);
static str8 text = {0};
ui_text_box_result res = ui_text_box("textbox", mem_scratch(), text);
if(res.changed)
{
mem_arena_clear(&textArena);
text = str8_push_copy(&textArena, res.text);
}
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.33}},
UI_STYLE_SIZE);
widget_view("Menus")
{
ui_menu_bar("Menu bar")
{
ui_menu("Menu 1")
{
if(ui_menu_button("Option 1.1").pressed)
{
printf("Pressed option 1.1\n");
}
ui_menu_button("Option 1.2");
ui_menu_button("Option 1.3");
ui_menu_button("Option 1.4");
}
ui_menu("Menu 2")
{
ui_menu_button("Option 2.1");
ui_menu_button("Option 2.2");
ui_menu_button("Option 2.3");
ui_menu_button("Option 2.4");
}
}
}
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.33}},
UI_STYLE_SIZE);
widget_view("Color")
{
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
.size.height = {UI_SIZE_PARENT, 0.7},
.layout.axis = UI_AXIS_X},
UI_STYLE_SIZE
|UI_STYLE_LAYOUT_AXIS);
ui_panel("Panel", UI_FLAG_DRAW_BORDER)
{
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X},
UI_STYLE_LAYOUT_AXIS);
ui_container("contents", 0)
{
ui_style_next(&(ui_style){.layout.spacing = 20},
UI_STYLE_LAYOUT_SPACING);
ui_container("buttons", 0)
{
ui_button("Button A");
ui_button("Button B");
ui_button("Button C");
ui_button("Button D");
}
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
.layout.spacing = 20},
UI_STYLE_LAYOUT_SPACING
|UI_STYLE_LAYOUT_AXIS);
ui_container("buttons2", 0)
{
ui_button("Button A");
ui_button("Button B");
ui_button("Button C");
ui_button("Button D");
}
}
}
}
}
}
}
}
if(printDebugStyle)
{
debug_print_styles(root, 0);
}
mg_surface_prepare(surface);
ui_draw();
mg_flush();
mg_surface_present(surface);
mem_arena_clear(mem_scratch());
}
mp_terminate();
return(0);
}

211
src/ui.c
View File

@ -357,6 +357,38 @@ 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;
}
}
//-----------------------------------------------------------------------------
// ui boxes
//-----------------------------------------------------------------------------
@ -1312,8 +1344,37 @@ void ui_draw_box(ui_box* box)
{
mp_rect textBox = mg_text_bounding_box(style->font, style->fontSize, box->string);
f32 x = box->rect.x + 0.5*(box->rect.w - textBox.w);
f32 y = box->rect.y + 0.5*(box->rect.h - textBox.h) - textBox.y;
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);
@ -1519,6 +1580,8 @@ ui_sig ui_button_str8(str8 label)
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},
@ -1530,6 +1593,8 @@ ui_sig ui_button_str8(str8 label)
| 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
@ -2014,6 +2079,148 @@ ui_sig ui_menu_button(const char* name)
return(sig);
}
void ui_select_popup_draw_arrow(ui_box* box, void* data)
{
mg_move_to(box->rect.x + 0.2*box->rect.w, box->rect.y + 0.4*box->rect.h);
mg_line_to(box->rect.x + 0.5*box->rect.w, box->rect.y + 0.8*box->rect.h);
mg_line_to(box->rect.x + 0.8*box->rect.w, box->rect.y + 0.4*box->rect.h);
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_box* button = ui_box_make(name,
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 = 2,
.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_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_BACKGROUND|UI_FLAG_DRAW_PROC);
ui_box_set_draw_proc(arrow, ui_select_popup_draw_arrow, 0);
} ui_box_pop();
ui_box_push(ui->overlay);
ui_box* panel = ui_box_make(name,
UI_FLAG_DRAW_BACKGROUND
|UI_FLAG_BLOCK_MOUSE);
//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_box_pop();
if(ui_box_active(panel) && mp_mouse_pressed(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
//------------------------------------------------------------------------------

11
src/ui.h
View File

@ -453,6 +453,17 @@ typedef struct ui_text_box_result
MP_API ui_text_box_result ui_text_box(const char* name, mem_arena* arena, str8 text);
typedef struct ui_select_popup_info
{
bool changed;
int selectedIndex;
int optionCount;
str8* options;
} ui_select_popup_info;
MP_API ui_select_popup_info ui_select_popup(const char* name, ui_select_popup_info* info);
#ifdef __cplusplus
} // extern "C"
#endif