orca/examples/ui/main.c

/************************************************************//**
*
*	@file: main.cpp
*	@author: Martin Fouilleul
*	@date: 30/07/2022
*	@revision:
*
*****************************************************************/
#include<stdlib.h>
#include<string.h>
#include<stdio.h>
#include<errno.h>

#define _USE_MATH_DEFINES //NOTE: necessary for MSVC
#include<math.h>

#include"milepost.h"

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()
{
	mp_init();
	mp_clock_init(); //TODO put that in mp_init()?

	ui_context context;
	ui_init(&context);
	ui_set_context(&context);

	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_CANVAS);
	mg_surface_swap_interval(surface, 0);

	//TODO: create canvas
	mg_canvas canvas = mg_canvas_create();

	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((event = mp_next_event(mem_scratch())) != 0)
		{
			ui_process_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;

		mp_rect frameRect = mg_surface_get_frame(surface);
		vec2 frameSize = {frameRect.w, frameRect.h};

		ui_frame(frameSize, &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_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_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")
						{
							ui_pattern pattern = {0};
							ui_pattern_push(mem_scratch(), &pattern, (ui_selector){.kind = UI_SEL_TEXT, .text = STR8("panel")});
							ui_style_match_after(pattern, &(ui_style){.bgColor = {0.3, 0.3, 1, 1}}, UI_STYLE_BG_COLOR);

							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");
									}
								}
							}
						}

					}
				}
			}
		}
		if(printDebugStyle)
		{
			debug_print_styles(root, 0);
		}

		mg_surface_prepare(surface);

		ui_draw();

		mg_render(surface, canvas);
		mg_surface_present(surface);

		mem_arena_clear(mem_scratch());
	}

	mg_surface_destroy(surface);
	mp_terminate();

	return(0);
}