diff --git a/examples/ui/main.c b/examples/ui/main.c index c373bf4..2d76251 100644 --- a/examples/ui/main.c +++ b/examples/ui/main.c @@ -17,6 +17,138 @@ #define LOG_SUBSYSTEM "Main" +void debug_print_indent(int indent) +{ + for(int i=0; ipattern.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,73 +257,334 @@ 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") - { - 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) - { - printf("Clicked button 1!\n"); - } - if(ui_button("2: Click me!").clicked) - { - printf("Clicked button 2!\n"); - } - ui_pop_size(UI_AXIS_X); - ui_pop_size(UI_AXIS_Y); - } + root = ui_box_top(); + ui_style_match_before(ui_pattern_all(), &defaultStyle, defaultMask); - ui_panel("sliders") - { - static float scrollValue1 = 0.; - static float scrollValue2 = 0.; + 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_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_panel("textbox") + ui_container("background", UI_FLAG_DRAW_BACKGROUND) { - 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_text_box_result res = ui_text_box("textbox", mem_scratch(), text); - if(res.changed) + 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) { - mem_arena_clear(&textArena); - text = str8_push_copy(&textArena, res.text); + 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!"); + } + } + } } - ui_pop_size(UI_AXIS_X); - ui_pop_size(UI_AXIS_Y); + 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_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_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_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"); + } + } + } + } + + } + } } - ui_pop_size(UI_AXIS_X); - ui_pop_size(UI_AXIS_Y); } + if(printDebugStyle) + { + debug_print_styles(root, 0); + } + + mg_surface_prepare(surface); ui_draw(); @@ -180,14 +592,8 @@ int main() 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); diff --git a/examples/ui_style_test/build.bat b/examples/ui_style_test/build.bat deleted file mode 100644 index 4d16c19..0000000 --- a/examples/ui_style_test/build.bat +++ /dev/null @@ -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 diff --git a/examples/ui_style_test/build.sh b/examples/ui_style_test/build.sh deleted file mode 100755 index ff49013..0000000 --- a/examples/ui_style_test/build.sh +++ /dev/null @@ -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 diff --git a/examples/ui_style_test/main.c b/examples/ui_style_test/main.c deleted file mode 100644 index b600a38..0000000 --- a/examples/ui_style_test/main.c +++ /dev/null @@ -1,561 +0,0 @@ -/************************************************************//** -* -* @file: main.cpp -* @author: Martin Fouilleul -* @date: 30/07/2022 -* @revision: -* -*****************************************************************/ -#include -#include -#include - -#define _USE_MATH_DEFINES //NOTE: necessary for MSVC -#include - -#include"milepost.h" - -#define LOG_SUBSYSTEM "Main" - -void debug_print_indent(int indent) -{ - for(int i=0; ipattern.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); -} diff --git a/src/ui.c b/src/ui.c index d6a1e51..74842a6 100644 --- a/src/ui.c +++ b/src/ui.c @@ -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; ioptionCount; 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; ioptionCount; 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 //------------------------------------------------------------------------------ diff --git a/src/ui.h b/src/ui.h index 288daaf..5933401 100644 --- a/src/ui.h +++ b/src/ui.h @@ -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