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

Zig UI demo #154

Merged
rdunnington merged 3 commits from ilidemi/orca:zig-ui into zig_ffi 2023-10-05 04:51:18 +00:00
Conversation 5 Commits 3 Files Changed 13 +1365 -1361
5 changed files with 1365 additions and 1361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 30d45cd7fd - Show all commits

12
doc/cheatsheets/cheatsheet_ui.h
View File

@ -29,15 +29,17 @@ oc_ui_sig oc_ui_label(const char* label);
oc_ui_sig oc_ui_label_str8(oc_str8 label); oc_ui_sig oc_ui_label_str8(oc_str8 label);
oc_ui_sig oc_ui_button(const char* label); oc_ui_sig oc_ui_button(const char* label);
oc_ui_sig oc_ui_checkbox(const char* name, bool* checked); oc_ui_sig oc_ui_checkbox(const char* name, bool* checked);
oc_ui_box* oc_ui_slider(const char* label, f32 thumbRatio, f32* scrollValue); oc_ui_box* oc_ui_slider(const char* name, f32* value);
oc_ui_box* oc_ui_scrollbar(const char* name, f32 thumbRatio, f32* scrollValue);
oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 text); oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 text);
oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_info* info); oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_info* info);
oc_ui_radio_group_info oc_ui_radio_group(const char* name, oc_ui_radio_group_info* info);
void oc_ui_panel_begin(const char* name, oc_ui_flags flags); void oc_ui_panel_begin(const char* name, oc_ui_flags flags);
void oc_ui_panel_end(void); void oc_ui_panel_end(void);
#define oc_ui_panel(s, f) #define oc_ui_panel(s, f)
void oc_ui_menu_bar_begin(const char* label); void oc_ui_menu_bar_begin(const char* name);
void oc_ui_menu_bar_end(void); void oc_ui_menu_bar_end(void);
#define oc_ui_menu_bar(name) #define oc_ui_menu_bar(name)
@ -45,11 +47,11 @@ void oc_ui_menu_begin(const char* label);
void oc_ui_menu_end(void); void oc_ui_menu_end(void);
#define oc_ui_menu(name) #define oc_ui_menu(name)
oc_ui_sig oc_ui_menu_button(const char* name); oc_ui_sig oc_ui_menu_button(const char* label);
oc_ui_sig oc_ui_tooltip_begin(const char* name); oc_ui_sig oc_ui_tooltip_begin(const char* label);
void oc_ui_tooltip_end(void); void oc_ui_tooltip_end(void);
#define oc_ui_tooltip(name) #define oc_ui_tooltip(label)
//------------------------------------------------------------------------------------- //-------------------------------------------------------------------------------------
// Styling // Styling

407
samples/zig-ui/src/main.zig
View File

@ -1,5 +1,6 @@
const std = @import("std"); const std = @import("std");
const oc = @import("orca"); const oc = @import("orca");
const ui = oc.ui;
var frame_size: oc.Vec2 = .{ .x = 1200, .y = 838 }; var frame_size: oc.Vec2 = .{ .x = 1200, .y = 838 };
@ -7,7 +8,7 @@ var surface: oc.Surface = undefined;
var canvas: oc.Canvas = undefined; var canvas: oc.Canvas = undefined;
var font_regular: oc.Font = undefined; var font_regular: oc.Font = undefined;
var font_bold: oc.Font = undefined; var font_bold: oc.Font = undefined;
var ui: oc.UiContext = undefined; var ui_ctx: ui.Context = undefined;
var text_arena: oc.Arena = undefined; var text_arena: oc.Arena = undefined;
var log_arena: oc.Arena = undefined; var log_arena: oc.Arena = undefined;
var log_lines: oc.Str8List = undefined; var log_lines: oc.Str8List = undefined;
@ -25,7 +26,7 @@ export fn oc_on_init() void {
surface = oc.Surface.canvas(); surface = oc.Surface.canvas();
canvas = oc.Canvas.create(); canvas = oc.Canvas.create();
ui.init(); ui_ctx.init();
var fonts = [_]*oc.Font{ &font_regular, &font_bold }; var fonts = [_]*oc.Font{ &font_regular, &font_bold };
var font_names = [_][]const u8{ "/OpenSans-Regular.ttf", "/OpenSans-Bold.ttf" }; var font_names = [_][]const u8{ "/OpenSans-Regular.ttf", "/OpenSans-Bold.ttf" };
@ -63,7 +64,7 @@ export fn oc_on_init() void {
} }
export fn oc_on_raw_event(event: *oc.CEvent) void { export fn oc_on_raw_event(event: *oc.CEvent) void {
oc.uiProcessCEvent(event); ui.processCEvent(event);
} }
export fn oc_on_resize(width: u32, height: u32) void { export fn oc_on_resize(width: u32, height: u32) void {
@ -76,52 +77,52 @@ export fn oc_on_frame_refresh() void {
defer scratch.end(); defer scratch.end();
switch (cmd) { switch (cmd) {
.SetDarkTheme => oc.uiSetTheme(oc.ui_dark_theme), .SetDarkTheme => ui.setTheme(ui.dark_theme),
.SetLightTheme => oc.uiSetTheme(oc.ui_light_theme), .SetLightTheme => ui.setTheme(ui.light_theme),
.None => {}, .None => {},
} }
cmd = .None; cmd = .None;
var default_style = oc.UiStyle{ .font = font_regular }; var default_style = ui.Style{ .font = font_regular };
{ {
oc.uiBeginFrame(frame_size, &default_style); ui.beginFrame(frame_size, &default_style);
defer oc.uiEndFrame(); defer ui.endFrame();
//-------------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------------
// Menu bar // Menu bar
//-------------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------------
{ {
oc.uiMenuBarBegin("menu_bar"); ui.menuBarBegin("menu_bar");
defer oc.uiMenuBarEnd(); defer ui.menuBarEnd();
{ {
oc.uiMenuBegin("File"); ui.menuBegin("File");
defer oc.uiMenuEnd(); defer ui.menuEnd();
if (oc.uiMenuButton("Quit").pressed) { if (ui.menuButton("Quit").pressed) {
oc.requestQuit(); oc.requestQuit();
} }
} }
{ {
oc.uiMenuBegin("Theme"); ui.menuBegin("Theme");
defer oc.uiMenuEnd(); defer ui.menuEnd();
if (oc.uiMenuButton("Dark theme").pressed) { if (ui.menuButton("Dark theme").pressed) {
cmd = .SetDarkTheme; cmd = .SetDarkTheme;
} }
if (oc.uiMenuButton("Light theme").pressed) { if (ui.menuButton("Light theme").pressed) {
cmd = .SetLightTheme; cmd = .SetLightTheme;
} }
} }
} }
{ {
oc.uiPanelBegin("main panel", .{}); ui.panelBegin("main panel", .{});
defer oc.uiPanelEnd(); defer ui.panelEnd();
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .size = .{
.width = .fill_parent, .width = .fill_parent,
.height = .{ .custom = .{ .kind = .Parent, .value = 1, .relax = 1 } }, .height = .{ .custom = .{ .kind = .Parent, .value = 1, .relax = 1 } },
@ -132,8 +133,8 @@ export fn oc_on_frame_refresh() void {
.spacing = 16, .spacing = 16,
}, },
}); });
_ = oc.uiBoxBegin("Background", .{ .draw_background = true }); _ = ui.boxBegin("Background", .{ .draw_background = true });
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
widgets(scratch.arena); widgets(scratch.arena);
@ -145,10 +146,10 @@ export fn oc_on_frame_refresh() void {
_ = canvas.select(); _ = canvas.select();
surface.select(); surface.select();
oc.Canvas.setColor(ui.theme.bg0); oc.Canvas.setColor(ui_ctx.theme.bg0);
oc.Canvas.clear(); oc.Canvas.clear();
oc.uiDraw(); ui.draw();
canvas.render(); canvas.render();
surface.present(); surface.present();
} }
@ -169,7 +170,7 @@ fn widgets(arena: *oc.Arena) void {
defer columnEnd(); defer columnEnd();
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .size = .{
.width = .fill_parent, .width = .fill_parent,
}, },
@ -178,46 +179,46 @@ fn widgets(arena: *oc.Arena) void {
.spacing = 32, .spacing = 32,
}, },
}); });
_ = oc.uiBoxBegin("top", .{}); _ = ui.boxBegin("top", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.layout = .{ .layout = .{
.axis = .Y, .axis = .Y,
.spacing = 24, .spacing = 24,
}, },
}); });
_ = oc.uiBoxBegin("top_left", .{}); _ = ui.boxBegin("top_left", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
// Label // Label
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
_ = oc.uiLabel("Label"); _ = ui.makeLabel("Label");
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
// Button // Button
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
if (oc.uiButton("Button").clicked) { if (ui.button("Button").clicked) {
logPush("Button clicked"); logPush("Button clicked");
} }
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.layout = .{ .layout = .{
.axis = .X, .axis = .X,
.alignment = .{ .y = .Center }, .alignment = .{ .y = .Center },
.spacing = 8, .spacing = 8,
}, },
}); });
_ = oc.uiBoxBegin("checkbox", .{}); _ = ui.boxBegin("checkbox", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
//------------------------------------------------------------------------- //-------------------------------------------------------------------------
// Checkbox // Checkbox
//------------------------------------------------------------------------- //-------------------------------------------------------------------------
if (oc.uiCheckbox("checkbox", &checkbox_checked).clicked) { if (ui.checkbox("checkbox", &checkbox_checked).clicked) {
if (checkbox_checked) { if (checkbox_checked) {
logPush("Checkbox checked"); logPush("Checkbox checked");
} else { } else {
@ -225,15 +226,15 @@ fn widgets(arena: *oc.Arena) void {
} }
} }
_ = oc.uiLabel("Checkbox"); _ = ui.makeLabel("Checkbox");
} }
} }
//--------------------------------------------------------------------------------- //---------------------------------------------------------------------------------
// Vertical slider // Vertical slider
//--------------------------------------------------------------------------------- //---------------------------------------------------------------------------------
oc.uiStyleNext(.{ .size = .{ .height = .{ .pixels = 130 } } }); ui.styleNext(.{ .size = .{ .height = .{ .pixels = 130 } } });
_ = oc.uiSlider("v_slider", &v_slider_value); _ = ui.slider("v_slider", &v_slider_value);
var now = oc.clock.time(.Monotonic); var now = oc.clock.time(.Monotonic);
if ((now - v_slider_log_time) >= 0.2 and v_slider_value != v_slider_logged_value) { if ((now - v_slider_log_time) >= 0.2 and v_slider_value != v_slider_logged_value) {
@ -243,20 +244,20 @@ fn widgets(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.layout = .{ .layout = .{
.axis = .Y, .axis = .Y,
.spacing = 24, .spacing = 24,
}, },
}); });
_ = oc.uiBoxBegin("top right", .{}); _ = ui.boxBegin("top right", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
// Tooltip // Tooltip
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
if (oc.uiLabel("Tooltip").hovering) { if (ui.makeLabel("Tooltip").hovering) {
oc.uiTooltip("Hi"); ui.tooltip("Hi");
} }
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
@ -266,11 +267,11 @@ fn widgets(arena: *oc.Arena) void {
"Radio 1", "Radio 1",
"Radio 2", "Radio 2",
}; };
var radio_group_info = oc.UiRadioGroupInfo{ var radio_group_info = ui.RadioGroupInfo{
.selected_index = radio_selected, .selected_index = radio_selected,
.options = &options, .options = &options,
}; };
var result = oc.uiRadioGroup("radio_group", &radio_group_info); var result = ui.radioGroup("radio_group", &radio_group_info);
radio_selected = result.selected_index.?; radio_selected = result.selected_index.?;
if (result.changed) { if (result.changed) {
logPushf("Selected {s}", .{options[radio_selected]}); logPushf("Selected {s}", .{options[radio_selected]});
@ -279,8 +280,8 @@ fn widgets(arena: *oc.Arena) void {
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
// Horizontal slider // Horizontal slider
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
oc.uiStyleNext(.{ .size = .{ .width = .{ .pixels = 130 } } }); ui.styleNext(.{ .size = .{ .width = .{ .pixels = 130 } } });
_ = oc.uiSlider("h_slider", &h_slider_value); _ = ui.slider("h_slider", &h_slider_value);
if ((now - h_slider_log_time) >= 0.2 and h_slider_value != h_slider_logged_value) { if ((now - h_slider_log_time) >= 0.2 and h_slider_value != h_slider_logged_value) {
logPushf("Slider moved to {d:.3}", .{h_slider_value}); logPushf("Slider moved to {d:.3}", .{h_slider_value});
@ -293,13 +294,13 @@ fn widgets(arena: *oc.Arena) void {
//------------------------------------------------------------------------------------- //-------------------------------------------------------------------------------------
// Text box // Text box
//------------------------------------------------------------------------------------- //-------------------------------------------------------------------------------------
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .size = .{
.width = .{ .pixels = 305 }, .width = .{ .pixels = 305 },
.height = .text, .height = .text,
}, },
}); });
var textResult = oc.uiTextBox("text", arena.*, text); var textResult = ui.textBox("text", arena.*, text);
if (textResult.changed) { if (textResult.changed) {
text_arena.clear(); text_arena.clear();
text = text_arena.pushStr(textResult.text) catch { text = text_arena.pushStr(textResult.text) catch {
@ -319,12 +320,12 @@ fn widgets(arena: *oc.Arena) void {
"Option 1", "Option 1",
"Option 2", "Option 2",
}; };
var select_popup_info = oc.UiSelectPopupInfo{ var select_popup_info = ui.SelectPopupInfo{
.selected_index = selected, .selected_index = selected,
.options = &options, .options = &options,
.placeholder = "Select", .placeholder = "Select",
}; };
var selectResult = oc.uiSelectPopup("select", &select_popup_info); var selectResult = ui.selectPopup("select", &select_popup_info);
if (selectResult.selected_index != selected) { if (selectResult.selected_index != selected) {
logPushf("Selected {s}", .{options[selectResult.selected_index.?]}); logPushf("Selected {s}", .{options[selectResult.selected_index.?]});
} }
@ -334,33 +335,33 @@ fn widgets(arena: *oc.Arena) void {
// Scrollable panel // Scrollable panel
//------------------------------------------------------------------------------------- //-------------------------------------------------------------------------------------
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .size = .{
.width = .fill_parent, .width = .fill_parent,
.height = .{ .height = .{
.custom = .{ .kind = .Parent, .value = 1, .relax = 1, .min_size = 200 }, .custom = .{ .kind = .Parent, .value = 1, .relax = 1, .min_size = 200 },
}, },
}, },
.bg_color = ui.theme.bg2, .bg_color = ui_ctx.theme.bg2,
.border_color = ui.theme.border, .border_color = ui_ctx.theme.border,
.border_size = 1, .border_size = 1,
.roundness = ui.theme.roundness_small, .roundness = ui_ctx.theme.roundness_small,
}); });
_ = oc.uiPanelBegin("log", .{ .draw_background = true, .draw_border = true }); _ = ui.panelBegin("log", .{ .draw_background = true, .draw_border = true });
defer oc.uiPanelEnd(); defer ui.panelEnd();
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.layout = .{ .layout = .{
.margin = .{ .x = 16, .y = 16 }, .margin = .{ .x = 16, .y = 16 },
}, },
}); });
_ = oc.uiBoxBegin("contents", .{}); _ = ui.boxBegin("contents", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
if (log_lines.list.empty()) { if (log_lines.list.empty()) {
oc.uiStyleNext(.{ .color = ui.theme.text2 }); ui.styleNext(.{ .color = ui_ctx.theme.text2 });
_ = oc.uiLabel("Log"); _ = ui.makeLabel("Log");
} }
var i: i32 = 0; var i: i32 = 0;
@ -368,10 +369,10 @@ fn widgets(arena: *oc.Arena) void {
while (log_lines_iter.next()) |log_line| { while (log_lines_iter.next()) |log_line| {
var buf: [15]u8 = undefined; var buf: [15]u8 = undefined;
var id = std.fmt.bufPrint(&buf, "{d}", .{i}) catch unreachable; var id = std.fmt.bufPrint(&buf, "{d}", .{i}) catch unreachable;
_ = oc.uiBoxBegin(id, .{}); _ = ui.boxBegin(id, .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
_ = oc.uiLabel(log_line.string.slice()); _ = ui.makeLabel(log_line.string.slice());
i += 1; i += 1;
} }
@ -386,14 +387,14 @@ var unselected_roundness: f32 = 8;
var unselected_bg_color: oc.Color = oc.Color.rgba(0.086, 0.086, 0.102, 1); var unselected_bg_color: oc.Color = oc.Color.rgba(0.086, 0.086, 0.102, 1);
var unselected_border_color: oc.Color = oc.Color.rgba(0.976, 0.976, 0.976, 0.35); var unselected_border_color: oc.Color = oc.Color.rgba(0.976, 0.976, 0.976, 0.35);
var unselected_border_size: f32 = 1; var unselected_border_size: f32 = 1;
var unselected_when_status: oc.UiStatus = .{}; var unselected_when_status: ui.Status = .{};
var unselected_status_index: ?usize = 0; var unselected_status_index: ?usize = 0;
var selected_width: f32 = 16; var selected_width: f32 = 16;
var selected_height: f32 = 16; var selected_height: f32 = 16;
var selected_roundness: f32 = 8; var selected_roundness: f32 = 8;
var selected_center_color: oc.Color = oc.Color.rgba(1, 1, 1, 1); var selected_center_color: oc.Color = oc.Color.rgba(1, 1, 1, 1);
var selected_bg_color: oc.Color = oc.Color.rgba(0.33, 0.66, 1, 1); var selected_bg_color: oc.Color = oc.Color.rgba(0.33, 0.66, 1, 1);
var selected_when_status: oc.UiStatus = .{}; var selected_when_status: ui.Status = .{};
var selected_status_index: ?usize = 0; var selected_status_index: ?usize = 0;
var label_font_color: oc.Color = oc.Color.rgba(0.976, 0.976, 0.976, 1); var label_font_color: oc.Color = oc.Color.rgba(0.976, 0.976, 0.976, 1);
var label_font_color_selected: ?usize = 0; var label_font_color_selected: ?usize = 0;
@ -407,15 +408,15 @@ fn styling(arena: *oc.Arena) void {
//----------------------------------------------------------------------------------------- //-----------------------------------------------------------------------------------------
// Initial values here are hardcoded from the dark theme and everything is overridden all // Initial values here are hardcoded from the dark theme and everything is overridden all
// the time. In a real program you'd only override what you need and supply the values from // the time. In a real program you'd only override what you need and supply the values from
// ui.theme or ui.theme.palette. // ui_ctx.theme or ui_ctx.theme.palette.
// //
// Rule-based styling is described at // Rule-based styling is described at
// https://www.forkingpaths.dev/posts/23-03-10/rule_based_styling_imgui.html // https://www.forkingpaths.dev/posts/23-03-10/rule_based_styling_imgui_ctx.html
columnBegin("Styling", 2.0 / 3.0); columnBegin("Styling", 2.0 / 3.0);
defer columnEnd(); defer columnEnd();
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .size = .{
.width = .fill_parent, .width = .fill_parent,
.height = .{ .pixels = 152 }, .height = .{ .pixels = 152 },
@ -423,21 +424,21 @@ fn styling(arena: *oc.Arena) void {
.layout = .{ .layout = .{
.margin = .{ .x = 310, .y = 16 }, .margin = .{ .x = 310, .y = 16 },
}, },
.bg_color = oc.ui_dark_theme.bg0, .bg_color = ui.dark_theme.bg0,
.roundness = oc.ui_dark_theme.roundness_small, .roundness = ui.dark_theme.roundness_small,
}); });
_ = oc.uiBoxBegin("styled_radios", .{ .draw_background = true, .draw_border = true }); _ = ui.boxBegin("styled_radios", .{ .draw_background = true, .draw_border = true });
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
resetNextRadioGroupToDarkTheme(arena); resetNextRadioGroupToDarkTheme(arena);
var unselected_tag = oc.uiTagMake("radio"); var unselected_tag = ui.Tag.make("radio");
var unselected_pattern = oc.UiPattern.init(); var unselected_pattern = ui.Pattern.init();
unselected_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } }); unselected_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } });
if (!unselected_when_status.empty()) { if (!unselected_when_status.empty()) {
unselected_pattern.push(arena, .{ .op = .And, .sel = .{ .status = unselected_when_status } }); unselected_pattern.push(arena, .{ .op = .And, .sel = .{ .status = unselected_when_status } });
} }
oc.uiStyleMatchAfter(unselected_pattern, .{ ui.styleMatchAfter(unselected_pattern, .{
.size = .{ .size = .{
.width = .{ .pixels = unselected_width }, .width = .{ .pixels = unselected_width },
.height = .{ .pixels = unselected_height }, .height = .{ .pixels = unselected_height },
@ -448,13 +449,13 @@ fn styling(arena: *oc.Arena) void {
.roundness = unselected_roundness, .roundness = unselected_roundness,
}); });
var selected_tag = oc.uiTagMake("radio_selected"); var selected_tag = ui.Tag.make("radio_selected");
var selected_pattern = oc.UiPattern.init(); var selected_pattern = ui.Pattern.init();
selected_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } }); selected_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } });
if (!selected_when_status.empty()) { if (!selected_when_status.empty()) {
selected_pattern.push(arena, .{ .op = .And, .sel = .{ .status = selected_when_status } }); selected_pattern.push(arena, .{ .op = .And, .sel = .{ .status = selected_when_status } });
} }
oc.uiStyleMatchAfter(selected_pattern, .{ ui.styleMatchAfter(selected_pattern, .{
.size = .{ .size = .{
.width = .{ .pixels = selected_width }, .width = .{ .pixels = selected_width },
.height = .{ .pixels = selected_height }, .height = .{ .pixels = selected_height },
@ -464,10 +465,10 @@ fn styling(arena: *oc.Arena) void {
.roundness = selected_roundness, .roundness = selected_roundness,
}); });
var label_tag = oc.uiTagMake("label"); var label_tag = ui.Tag.make("label");
var label_pattern = oc.UiPattern.init(); var label_pattern = ui.Pattern.init();
label_pattern.push(arena, .{ .sel = .{ .tag = label_tag } }); label_pattern.push(arena, .{ .sel = .{ .tag = label_tag } });
oc.uiStyleMatchAfter(label_pattern, .{ ui.styleMatchAfter(label_pattern, .{
.color = label_font_color, .color = label_font_color,
.font = label_font.*, .font = label_font.*,
.font_size = label_font_size, .font_size = label_font_size,
@ -478,31 +479,31 @@ fn styling(arena: *oc.Arena) void {
"Am", "Am",
"Stylish", "Stylish",
}; };
var radio_group_info = oc.UiRadioGroupInfo{ var radio_group_info = ui.RadioGroupInfo{
.selected_index = styling_selected_radio, .selected_index = styling_selected_radio,
.options = &options, .options = &options,
}; };
var result = oc.uiRadioGroup("radio_group", &radio_group_info); var result = ui.radioGroup("radio_group", &radio_group_info);
styling_selected_radio = result.selected_index; styling_selected_radio = result.selected_index;
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 32 } }); ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 32 } });
_ = oc.uiBoxBegin("controls", .{}); _ = ui.boxBegin("controls", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
{ {
oc.uiStyleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } }); ui.styleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } });
_ = oc.uiBoxBegin("unselected", .{}); _ = ui.boxBegin("unselected", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 16 }); ui.styleNext(.{ .font_size = 16 });
_ = oc.uiLabel("Radio style"); _ = ui.makeLabel("Radio style");
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } }); ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("size", .{}); _ = ui.boxBegin("size", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
var width_slider = (unselected_width - 8) / 16; var width_slider = (unselected_width - 8) / 16;
labeledSlider("Width", &width_slider); labeledSlider("Width", &width_slider);
@ -518,9 +519,9 @@ fn styling(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } }); ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("background", .{}); _ = ui.boxBegin("background", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
labeledSlider("Background R", &unselected_bg_color.r); labeledSlider("Background R", &unselected_bg_color.r);
labeledSlider("Background G", &unselected_bg_color.g); labeledSlider("Background G", &unselected_bg_color.g);
@ -529,9 +530,9 @@ fn styling(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } }); ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("border", .{}); _ = ui.boxBegin("border", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
labeledSlider("Border R", &unselected_border_color.r); labeledSlider("Border R", &unselected_border_color.r);
labeledSlider("Border G", &unselected_border_color.g); labeledSlider("Border G", &unselected_border_color.g);
@ -544,22 +545,22 @@ fn styling(arena: *oc.Arena) void {
unselected_border_size = border_size_slider * 5; unselected_border_size = border_size_slider * 5;
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 10 } }); ui.styleNext(.{ .layout = .{ .spacing = 10 } });
_ = oc.uiBoxBegin("status_override", .{}); _ = ui.boxBegin("status_override", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
_ = oc.uiLabel("Override"); _ = ui.makeLabel("Override");
var status_options = [_][]const u8{ var status_options = [_][]const u8{
"Always", "Always",
"When hovering", "When hovering",
"When active", "When active",
}; };
var status_info = oc.UiRadioGroupInfo{ var status_info = ui.RadioGroupInfo{
.selected_index = unselected_status_index, .selected_index = unselected_status_index,
.options = &status_options, .options = &status_options,
}; };
var status_result = oc.uiRadioGroup("status", &status_info); var status_result = ui.radioGroup("status", &status_info);
unselected_status_index = status_result.selected_index; unselected_status_index = status_result.selected_index;
unselected_when_status = switch (unselected_status_index.?) { unselected_when_status = switch (unselected_status_index.?) {
0 => .{}, 0 => .{},
@ -571,17 +572,17 @@ fn styling(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } }); ui.styleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } });
_ = oc.uiBoxBegin("selected", .{}); _ = ui.boxBegin("selected", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 16 }); ui.styleNext(.{ .font_size = 16 });
_ = oc.uiLabel("Radio selected style"); _ = ui.makeLabel("Radio selected style");
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } }); ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("size", .{}); _ = ui.boxBegin("size", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
var width_slider = (selected_width - 8) / 16; var width_slider = (selected_width - 8) / 16;
labeledSlider("Width", &width_slider); labeledSlider("Width", &width_slider);
@ -597,9 +598,9 @@ fn styling(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } }); ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("color", .{}); _ = ui.boxBegin("color", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
labeledSlider("Center R", &selected_center_color.r); labeledSlider("Center R", &selected_center_color.r);
labeledSlider("Center G", &selected_center_color.g); labeledSlider("Center G", &selected_center_color.g);
@ -608,9 +609,9 @@ fn styling(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } }); ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("background", .{}); _ = ui.boxBegin("background", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
labeledSlider("Background R", &selected_bg_color.r); labeledSlider("Background R", &selected_bg_color.r);
labeledSlider("Background G", &selected_bg_color.g); labeledSlider("Background G", &selected_bg_color.g);
@ -619,25 +620,25 @@ fn styling(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .spacing = 10 } }); ui.styleNext(.{ .layout = .{ .spacing = 10 } });
_ = oc.uiBoxBegin("status_override", .{}); _ = ui.boxBegin("status_override", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .size = .{ .height = .{ .pixels = 30 } } }); ui.styleNext(.{ .size = .{ .height = .{ .pixels = 30 } } });
_ = oc.uiBoxMake("spacer", .{}); _ = ui.boxMake("spacer", .{});
_ = oc.uiLabel("Override"); _ = ui.makeLabel("Override");
var status_options = [_][]const u8{ var status_options = [_][]const u8{
"Always", "Always",
"When hovering", "When hovering",
"When active", "When active",
}; };
var status_info = oc.UiRadioGroupInfo{ var status_info = ui.RadioGroupInfo{
.selected_index = selected_status_index, .selected_index = selected_status_index,
.options = &status_options, .options = &status_options,
}; };
var status_result = oc.uiRadioGroup("status", &status_info); var status_result = ui.radioGroup("status", &status_info);
selected_status_index = status_result.selected_index; selected_status_index = status_result.selected_index;
selected_when_status = switch (selected_status_index.?) { selected_when_status = switch (selected_status_index.?) {
0 => .{}, 0 => .{},
@ -649,22 +650,22 @@ fn styling(arena: *oc.Arena) void {
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .axis = .Y, .spacing = 10 } }); ui.styleNext(.{ .layout = .{ .axis = .Y, .spacing = 10 } });
_ = oc.uiBoxBegin("label", .{}); _ = ui.boxBegin("label", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 16 }); ui.styleNext(.{ .font_size = 16 });
_ = oc.uiLabel("Label style"); _ = ui.makeLabel("Label style");
{ {
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } }); ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = oc.uiBoxBegin("font_color", .{}); _ = ui.boxBegin("font_color", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleMatchAfter(oc.UiPattern.owner(), .{ ui.styleMatchAfter(ui.Pattern.owner(), .{
.size = .{ .width = .{ .pixels = 100 } }, .size = .{ .width = .{ .pixels = 100 } },
}); });
_ = oc.uiLabel("Font color"); _ = ui.makeLabel("Font color");
var color_names = [_][]const u8{ var color_names = [_][]const u8{
"Default", "Default",
@ -677,33 +678,33 @@ fn styling(arena: *oc.Arena) void {
"Green", "Green",
}; };
var colors = [_]oc.Color{ var colors = [_]oc.Color{
oc.ui_dark_theme.text0, ui.dark_theme.text0,
oc.ui_dark_theme.palette.red5, ui.dark_theme.palette.red5,
oc.ui_dark_theme.palette.orange5, ui.dark_theme.palette.orange5,
oc.ui_dark_theme.palette.amber5, ui.dark_theme.palette.amber5,
oc.ui_dark_theme.palette.yellow5, ui.dark_theme.palette.yellow5,
oc.ui_dark_theme.palette.lime5, ui.dark_theme.palette.lime5,
oc.ui_dark_theme.palette.light_green5, ui.dark_theme.palette.light_green5,
oc.ui_dark_theme.palette.green5, ui.dark_theme.palette.green5,
}; };
var color_info = oc.UiSelectPopupInfo{ var color_info = ui.SelectPopupInfo{
.selected_index = label_font_color_selected, .selected_index = label_font_color_selected,
.options = &color_names, .options = &color_names,
}; };
var color_result = oc.uiSelectPopup("color", &color_info); var color_result = ui.selectPopup("color", &color_info);
label_font_color_selected = color_result.selected_index; label_font_color_selected = color_result.selected_index;
label_font_color = colors[label_font_color_selected.?]; label_font_color = colors[label_font_color_selected.?];
} }
{ {
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } }); ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = oc.uiBoxBegin("font", .{}); _ = ui.boxBegin("font", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleMatchAfter(oc.UiPattern.owner(), .{ ui.styleMatchAfter(ui.Pattern.owner(), .{
.size = .{ .width = .{ .pixels = 100 } }, .size = .{ .width = .{ .pixels = 100 } },
}); });
_ = oc.uiLabel("Font"); _ = ui.makeLabel("Font");
var font_names = [_][]const u8{ var font_names = [_][]const u8{
"Regular", "Regular",
@ -713,11 +714,11 @@ fn styling(arena: *oc.Arena) void {
&font_regular, &font_regular,
&font_bold, &font_bold,
}; };
var font_info = oc.UiSelectPopupInfo{ var font_info = ui.SelectPopupInfo{
.selected_index = label_font_selected, .selected_index = label_font_selected,
.options = &font_names, .options = &font_names,
}; };
var font_result = oc.uiSelectPopup("font_style", &font_info); var font_result = ui.selectPopup("font_style", &font_info);
label_font_selected = font_result.selected_index; label_font_selected = font_result.selected_index;
label_font = fonts[label_font_selected.?]; label_font = fonts[label_font_selected.?];
} }
@ -730,7 +731,7 @@ fn styling(arena: *oc.Arena) void {
} }
fn columnBegin(header: []const u8, widthFraction: f32) void { fn columnBegin(header: []const u8, widthFraction: f32) void {
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .size = .{
.width = .{ .width = .{
.custom = .{ .kind = .Parent, .value = widthFraction, .relax = 1 }, .custom = .{ .kind = .Parent, .value = widthFraction, .relax = 1 },
@ -742,26 +743,26 @@ fn columnBegin(header: []const u8, widthFraction: f32) void {
.margin = .{ .y = 8 }, .margin = .{ .y = 8 },
.spacing = 24, .spacing = 24,
}, },
.bg_color = ui.theme.bg1, .bg_color = ui_ctx.theme.bg1,
.border_color = ui.theme.border, .border_color = ui_ctx.theme.border,
.border_size = 1, .border_size = 1,
.roundness = ui.theme.roundness_small, .roundness = ui_ctx.theme.roundness_small,
}); });
_ = oc.uiBoxBegin(header, .{ .draw_background = true, .draw_border = true }); _ = ui.boxBegin(header, .{ .draw_background = true, .draw_border = true });
{ {
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .width = .fill_parent }, .size = .{ .width = .fill_parent },
.layout = .{ .alignment = .{ .x = .Center } }, .layout = .{ .alignment = .{ .x = .Center } },
}); });
_ = oc.uiBoxBegin("header", .{}); _ = ui.boxBegin("header", .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 18 }); ui.styleNext(.{ .font_size = 18 });
_ = oc.uiLabel(header); _ = ui.makeLabel(header);
} }
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .size = .{
.width = .fill_parent, .width = .fill_parent,
.height = .{ .height = .{
@ -774,28 +775,28 @@ fn columnBegin(header: []const u8, widthFraction: f32) void {
.spacing = 24, .spacing = 24,
}, },
}); });
_ = oc.uiBoxBegin("contents", .{}); _ = ui.boxBegin("contents", .{});
} }
fn columnEnd() void { fn columnEnd() void {
_ = oc.uiBoxEnd(); // contents _ = ui.boxEnd(); // contents
_ = oc.uiBoxEnd(); // column _ = ui.boxEnd(); // column
} }
fn labeledSlider(label: []const u8, value: *f32) void { fn labeledSlider(label: []const u8, value: *f32) void {
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } }); ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = oc.uiBoxBegin(label, .{}); _ = ui.boxBegin(label, .{});
defer _ = oc.uiBoxEnd(); defer _ = ui.boxEnd();
oc.uiStyleMatchAfter(oc.UiPattern.owner(), .{ ui.styleMatchAfter(ui.Pattern.owner(), .{
.size = .{ .width = .{ .pixels = 100 } }, .size = .{ .width = .{ .pixels = 100 } },
}); });
_ = oc.uiLabel(label); _ = ui.makeLabel(label);
oc.uiStyleNext(.{ ui.styleNext(.{
.size = .{ .width = .{ .pixels = 100 } }, .size = .{ .width = .{ .pixels = 100 } },
}); });
_ = oc.uiSlider("slider", value); _ = ui.slider("slider", value);
} }
fn logPush(line: []const u8) void { fn logPush(line: []const u8) void {
@ -820,51 +821,51 @@ fn logPushf(comptime fmt: []const u8, args: anytype) void {
} }
/// This makes sure the light theme doesn't break the styling overrides /// This makes sure the light theme doesn't break the styling overrides
/// You won't need it in a real program as long as your colors come from ui.theme or ui.theme.palette /// You won't need it in a real program as long as your colors come from ui_ctx.theme or ui_ctx.theme.palette
fn resetNextRadioGroupToDarkTheme(arena: *oc.Arena) void { fn resetNextRadioGroupToDarkTheme(arena: *oc.Arena) void {
var unselected_tag = oc.uiTagMake("radio"); var unselected_tag = ui.Tag.make("radio");
var unselected_pattern = oc.UiPattern.init(); var unselected_pattern = ui.Pattern.init();
unselected_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } }); unselected_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } });
oc.uiStyleMatchAfter(unselected_pattern, .{ ui.styleMatchAfter(unselected_pattern, .{
.border_color = oc.ui_dark_theme.text3, .border_color = ui.dark_theme.text3,
.border_size = 1, .border_size = 1,
}); });
var unselected_hover_pattern = oc.UiPattern.init(); var unselected_hover_pattern = ui.Pattern.init();
unselected_hover_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } }); unselected_hover_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } });
unselected_hover_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .hover = true } } }); unselected_hover_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .hover = true } } });
oc.uiStyleMatchAfter(unselected_hover_pattern, .{ ui.styleMatchAfter(unselected_hover_pattern, .{
.bg_color = oc.ui_dark_theme.fill0, .bg_color = ui.dark_theme.fill0,
.border_color = oc.ui_dark_theme.primary, .border_color = ui.dark_theme.primary,
}); });
var unselected_active_pattern = oc.UiPattern.init(); var unselected_active_pattern = ui.Pattern.init();
unselected_active_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } }); unselected_active_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } });
unselected_active_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .active = true } } }); unselected_active_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .active = true } } });
oc.uiStyleMatchAfter(unselected_active_pattern, .{ ui.styleMatchAfter(unselected_active_pattern, .{
.bg_color = oc.ui_dark_theme.fill1, .bg_color = ui.dark_theme.fill1,
.border_color = oc.ui_dark_theme.primary, .border_color = ui.dark_theme.primary,
}); });
var selected_tag = oc.uiTagMake("radio_selected"); var selected_tag = ui.Tag.make("radio_selected");
var selected_pattern = oc.UiPattern.init(); var selected_pattern = ui.Pattern.init();
selected_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } }); selected_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } });
oc.uiStyleMatchAfter(selected_pattern, .{ ui.styleMatchAfter(selected_pattern, .{
.color = oc.ui_dark_theme.palette.white, .color = ui.dark_theme.palette.white,
.bg_color = oc.ui_dark_theme.primary, .bg_color = ui.dark_theme.primary,
}); });
var selected_hover_pattern = oc.UiPattern.init(); var selected_hover_pattern = ui.Pattern.init();
selected_hover_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } }); selected_hover_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } });
selected_hover_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .hover = true } } }); selected_hover_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .hover = true } } });
oc.uiStyleMatchAfter(selected_hover_pattern, .{ ui.styleMatchAfter(selected_hover_pattern, .{
.bg_color = oc.ui_dark_theme.primary_hover, .bg_color = ui.dark_theme.primary_hover,
}); });
var selected_active_pattern = oc.UiPattern.init(); var selected_active_pattern = ui.Pattern.init();
selected_active_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } }); selected_active_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } });
selected_active_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .active = true } } }); selected_active_pattern.push(arena, .{ .op = .And, .sel = .{ .status = .{ .active = true } } });
oc.uiStyleMatchAfter(selected_active_pattern, .{ ui.styleMatchAfter(selected_active_pattern, .{
.bg_color = oc.ui_dark_theme.primary_active, .bg_color = ui.dark_theme.primary_active,
}); });
} }

763
src/orca.zig
View File

File diff suppressed because it is too large Load Diff

24
src/ui/ui.c
View File

@ -1989,13 +1989,13 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked)
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// slider / scrollbar // slider / scrollbar
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
oc_ui_box* oc_ui_slider_str8(oc_str8 label, f32* value) oc_ui_box* oc_ui_slider_str8(oc_str8 name, f32* value)
{ {
oc_ui_context* ui = oc_ui_get_context(); oc_ui_context* ui = oc_ui_get_context();
oc_ui_theme* theme = ui->theme; oc_ui_theme* theme = ui->theme;
oc_ui_style_match_before(oc_ui_pattern_all(), &(oc_ui_style){ 0 }, OC_UI_STYLE_LAYOUT); oc_ui_style_match_before(oc_ui_pattern_all(), &(oc_ui_style){ 0 }, OC_UI_STYLE_LAYOUT);
oc_ui_box* frame = oc_ui_box_begin_str8(label, 0); oc_ui_box* frame = oc_ui_box_begin_str8(name, 0);
{ {
oc_ui_axis trackAxis = (frame->rect.w > frame->rect.h) ? OC_UI_AXIS_X : OC_UI_AXIS_Y; oc_ui_axis trackAxis = (frame->rect.w > frame->rect.h) ? OC_UI_AXIS_X : OC_UI_AXIS_Y;
oc_ui_axis secondAxis = (trackAxis == OC_UI_AXIS_Y) ? OC_UI_AXIS_X : OC_UI_AXIS_Y; oc_ui_axis secondAxis = (trackAxis == OC_UI_AXIS_Y) ? OC_UI_AXIS_X : OC_UI_AXIS_Y;
@ -2166,17 +2166,17 @@ oc_ui_box* oc_ui_slider_str8(oc_str8 label, f32* value)
return (frame); return (frame);
} }
oc_ui_box* oc_ui_slider(const char* label, f32* value) oc_ui_box* oc_ui_slider(const char* name, f32* value)
{ {
return oc_ui_slider_str8(OC_STR8(label), value); return oc_ui_slider_str8(OC_STR8(name), value);
} }
oc_ui_box* oc_ui_scrollbar_str8(oc_str8 label, f32 thumbRatio, f32* scrollValue) oc_ui_box* oc_ui_scrollbar_str8(oc_str8 name, f32 thumbRatio, f32* scrollValue)
{ {
oc_ui_context* ui = oc_ui_get_context(); oc_ui_context* ui = oc_ui_get_context();
oc_ui_theme* theme = ui->theme; oc_ui_theme* theme = ui->theme;
oc_ui_style_match_before(oc_ui_pattern_all(), &(oc_ui_style){ 0 }, OC_UI_STYLE_LAYOUT); oc_ui_style_match_before(oc_ui_pattern_all(), &(oc_ui_style){ 0 }, OC_UI_STYLE_LAYOUT);
oc_ui_box* frame = oc_ui_box_begin_str8(label, 0); oc_ui_box* frame = oc_ui_box_begin_str8(name, 0);
{ {
f32 minThumbRatio = 17. / oc_max(frame->rect.w, frame->rect.h); f32 minThumbRatio = 17. / oc_max(frame->rect.w, frame->rect.h);
thumbRatio = oc_min(oc_max(thumbRatio, minThumbRatio), 1.); thumbRatio = oc_min(oc_max(thumbRatio, minThumbRatio), 1.);
@ -2302,9 +2302,9 @@ oc_ui_box* oc_ui_scrollbar_str8(oc_str8 label, f32 thumbRatio, f32* scrollValue)
return (frame); return (frame);
} }
oc_ui_box* oc_ui_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue) oc_ui_box* oc_ui_scrollbar(const char* name, f32 thumbRatio, f32* scrollValue)
{ {
return oc_ui_scrollbar_str8(OC_STR8(label), thumbRatio, scrollValue); return oc_ui_scrollbar_str8(OC_STR8(name), thumbRatio, scrollValue);
} }
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@ -2633,7 +2633,7 @@ void oc_ui_menu_end(void)
oc_ui_box_pop(); // container oc_ui_box_pop(); // container
} }
oc_ui_sig oc_ui_menu_button_str8(oc_str8 name) oc_ui_sig oc_ui_menu_button_str8(oc_str8 label)
{ {
oc_ui_context* ui = oc_ui_get_context(); oc_ui_context* ui = oc_ui_get_context();
oc_ui_theme* theme = ui->theme; oc_ui_theme* theme = ui->theme;
@ -2662,14 +2662,14 @@ oc_ui_sig oc_ui_menu_button_str8(oc_str8 name)
| OC_UI_FLAG_DRAW_TEXT | OC_UI_FLAG_DRAW_TEXT
| OC_UI_FLAG_DRAW_BACKGROUND; | OC_UI_FLAG_DRAW_BACKGROUND;
oc_ui_box* box = oc_ui_box_make_str8(name, flags); oc_ui_box* box = oc_ui_box_make_str8(label, flags);
oc_ui_sig sig = oc_ui_box_sig(box); oc_ui_sig sig = oc_ui_box_sig(box);
return (sig); return (sig);
} }
oc_ui_sig oc_ui_menu_button(const char* name) oc_ui_sig oc_ui_menu_button(const char* label)
{ {
return oc_ui_menu_button_str8(OC_STR8(name)); return oc_ui_menu_button_str8(OC_STR8(label));
} }
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------

10
src/ui/ui.h
View File

@ -733,23 +733,23 @@ ORCA_API oc_ui_sig oc_ui_label_str8(oc_str8 label);
ORCA_API oc_ui_sig oc_ui_button(const char* label); ORCA_API oc_ui_sig oc_ui_button(const char* label);
ORCA_API oc_ui_sig oc_ui_checkbox(const char* name, bool* checked); ORCA_API oc_ui_sig oc_ui_checkbox(const char* name, bool* checked);
ORCA_API oc_ui_box* oc_ui_slider(const char* label, f32* value); ORCA_API oc_ui_box* oc_ui_slider(const char* name, f32* value);
ORCA_API oc_ui_box* oc_ui_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue); ORCA_API oc_ui_box* oc_ui_scrollbar(const char* name, f32 thumbRatio, f32* scrollValue);
ORCA_API void oc_ui_tooltip(const char* label); ORCA_API void oc_ui_tooltip(const char* label);
ORCA_API void oc_ui_panel_begin(const char* name, oc_ui_flags flags); ORCA_API void oc_ui_panel_begin(const char* name, oc_ui_flags flags);
ORCA_API void oc_ui_panel_end(void); ORCA_API void oc_ui_panel_end(void);
#define oc_ui_panel(s, f) oc_defer_loop(oc_ui_panel_begin(s, f), oc_ui_panel_end()) #define oc_ui_panel(s, f) oc_defer_loop(oc_ui_panel_begin(s, f), oc_ui_panel_end())
ORCA_API void oc_ui_menu_bar_begin(const char* label); ORCA_API void oc_ui_menu_bar_begin(const char* name);
ORCA_API void oc_ui_menu_bar_end(void); ORCA_API void oc_ui_menu_bar_end(void);
#define oc_ui_menu_bar(name) oc_defer_loop(oc_ui_menu_bar_begin(name), oc_ui_menu_bar_end()) #define oc_ui_menu_bar(name) oc_defer_loop(oc_ui_menu_bar_begin(name), oc_ui_menu_bar_end())
ORCA_API void oc_ui_menu_begin(const char* label); ORCA_API void oc_ui_menu_begin(const char* label);
ORCA_API void oc_ui_menu_end(void); ORCA_API void oc_ui_menu_end(void);
#define oc_ui_menu(name) oc_defer_loop(oc_ui_menu_begin(name), oc_ui_menu_end()) #define oc_ui_menu(label) oc_defer_loop(oc_ui_menu_begin(label), oc_ui_menu_end())
ORCA_API oc_ui_sig oc_ui_menu_button(const char* name); ORCA_API oc_ui_sig oc_ui_menu_button(const char* label);
typedef struct oc_ui_text_box_result typedef struct oc_ui_text_box_result
{ {