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

Comptime enum counts, namespace UI, clarify names/labels

This commit is contained in:
Ilia Demianenko 2023-10-03 20:22:43 -07:00
parent fd308f9a3a
commit 30d45cd7fd
5 changed files with 1365 additions and 1361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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_button(const char* label);
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_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_end(void);
#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);
#define oc_ui_menu_bar(name)
@ -45,11 +47,11 @@ void oc_ui_menu_begin(const char* label);
void oc_ui_menu_end(void);
#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);
#define oc_ui_tooltip(name)
#define oc_ui_tooltip(label)
//-------------------------------------------------------------------------------------
// Styling

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

@ -1,5 +1,6 @@
const std = @import("std");
const oc = @import("orca");
const ui = oc.ui;
var frame_size: oc.Vec2 = .{ .x = 1200, .y = 838 };
@ -7,7 +8,7 @@ var surface: oc.Surface = undefined;
var canvas: oc.Canvas = undefined;
var font_regular: 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 log_arena: oc.Arena = undefined;
var log_lines: oc.Str8List = undefined;
@ -25,7 +26,7 @@ export fn oc_on_init() void {
surface = oc.Surface.canvas();
canvas = oc.Canvas.create();
ui.init();
ui_ctx.init();
var fonts = [_]*oc.Font{ &font_regular, &font_bold };
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 {
oc.uiProcessCEvent(event);
ui.processCEvent(event);
}
export fn oc_on_resize(width: u32, height: u32) void {
@ -76,52 +77,52 @@ export fn oc_on_frame_refresh() void {
defer scratch.end();
switch (cmd) {
.SetDarkTheme => oc.uiSetTheme(oc.ui_dark_theme),
.SetLightTheme => oc.uiSetTheme(oc.ui_light_theme),
.SetDarkTheme => ui.setTheme(ui.dark_theme),
.SetLightTheme => ui.setTheme(ui.light_theme),
.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);
defer oc.uiEndFrame();
ui.beginFrame(frame_size, &default_style);
defer ui.endFrame();
//--------------------------------------------------------------------------------------------
// Menu bar
//--------------------------------------------------------------------------------------------
{
oc.uiMenuBarBegin("menu_bar");
defer oc.uiMenuBarEnd();
ui.menuBarBegin("menu_bar");
defer ui.menuBarEnd();
{
oc.uiMenuBegin("File");
defer oc.uiMenuEnd();
ui.menuBegin("File");
defer ui.menuEnd();
if (oc.uiMenuButton("Quit").pressed) {
if (ui.menuButton("Quit").pressed) {
oc.requestQuit();
}
}
{
oc.uiMenuBegin("Theme");
defer oc.uiMenuEnd();
ui.menuBegin("Theme");
defer ui.menuEnd();
if (oc.uiMenuButton("Dark theme").pressed) {
if (ui.menuButton("Dark theme").pressed) {
cmd = .SetDarkTheme;
}
if (oc.uiMenuButton("Light theme").pressed) {
if (ui.menuButton("Light theme").pressed) {
cmd = .SetLightTheme;
}
}
}
{
oc.uiPanelBegin("main panel", .{});
defer oc.uiPanelEnd();
ui.panelBegin("main panel", .{});
defer ui.panelEnd();
{
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{
.width = .fill_parent,
.height = .{ .custom = .{ .kind = .Parent, .value = 1, .relax = 1 } },
@ -132,8 +133,8 @@ export fn oc_on_frame_refresh() void {
.spacing = 16,
},
});
_ = oc.uiBoxBegin("Background", .{ .draw_background = true });
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("Background", .{ .draw_background = true });
defer _ = ui.boxEnd();
widgets(scratch.arena);
@ -145,10 +146,10 @@ export fn oc_on_frame_refresh() void {
_ = canvas.select();
surface.select();
oc.Canvas.setColor(ui.theme.bg0);
oc.Canvas.setColor(ui_ctx.theme.bg0);
oc.Canvas.clear();
oc.uiDraw();
ui.draw();
canvas.render();
surface.present();
}
@ -169,7 +170,7 @@ fn widgets(arena: *oc.Arena) void {
defer columnEnd();
{
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{
.width = .fill_parent,
},
@ -178,46 +179,46 @@ fn widgets(arena: *oc.Arena) void {
.spacing = 32,
},
});
_ = oc.uiBoxBegin("top", .{});
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("top", .{});
defer _ = ui.boxEnd();
{
oc.uiStyleNext(.{
ui.styleNext(.{
.layout = .{
.axis = .Y,
.spacing = 24,
},
});
_ = oc.uiBoxBegin("top_left", .{});
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("top_left", .{});
defer _ = ui.boxEnd();
//-----------------------------------------------------------------------------
// Label
//-----------------------------------------------------------------------------
_ = oc.uiLabel("Label");
_ = ui.makeLabel("Label");
//-----------------------------------------------------------------------------
// Button
//-----------------------------------------------------------------------------
if (oc.uiButton("Button").clicked) {
if (ui.button("Button").clicked) {
logPush("Button clicked");
}
{
oc.uiStyleNext(.{
ui.styleNext(.{
.layout = .{
.axis = .X,
.alignment = .{ .y = .Center },
.spacing = 8,
},
});
_ = oc.uiBoxBegin("checkbox", .{});
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("checkbox", .{});
defer _ = ui.boxEnd();
//-------------------------------------------------------------------------
// Checkbox
//-------------------------------------------------------------------------
if (oc.uiCheckbox("checkbox", &checkbox_checked).clicked) {
if (ui.checkbox("checkbox", &checkbox_checked).clicked) {
if (checkbox_checked) {
logPush("Checkbox checked");
} else {
@ -225,15 +226,15 @@ fn widgets(arena: *oc.Arena) void {
}
}
_ = oc.uiLabel("Checkbox");
_ = ui.makeLabel("Checkbox");
}
}
//---------------------------------------------------------------------------------
// Vertical slider
//---------------------------------------------------------------------------------
oc.uiStyleNext(.{ .size = .{ .height = .{ .pixels = 130 } } });
_ = oc.uiSlider("v_slider", &v_slider_value);
ui.styleNext(.{ .size = .{ .height = .{ .pixels = 130 } } });
_ = ui.slider("v_slider", &v_slider_value);
var now = oc.clock.time(.Monotonic);
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 = .{
.axis = .Y,
.spacing = 24,
},
});
_ = oc.uiBoxBegin("top right", .{});
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("top right", .{});
defer _ = ui.boxEnd();
//-----------------------------------------------------------------------------
// Tooltip
//-----------------------------------------------------------------------------
if (oc.uiLabel("Tooltip").hovering) {
oc.uiTooltip("Hi");
if (ui.makeLabel("Tooltip").hovering) {
ui.tooltip("Hi");
}
//-----------------------------------------------------------------------------
@ -266,11 +267,11 @@ fn widgets(arena: *oc.Arena) void {
"Radio 1",
"Radio 2",
};
var radio_group_info = oc.UiRadioGroupInfo{
var radio_group_info = ui.RadioGroupInfo{
.selected_index = radio_selected,
.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.?;
if (result.changed) {
logPushf("Selected {s}", .{options[radio_selected]});
@ -279,8 +280,8 @@ fn widgets(arena: *oc.Arena) void {
//-----------------------------------------------------------------------------
// Horizontal slider
//-----------------------------------------------------------------------------
oc.uiStyleNext(.{ .size = .{ .width = .{ .pixels = 130 } } });
_ = oc.uiSlider("h_slider", &h_slider_value);
ui.styleNext(.{ .size = .{ .width = .{ .pixels = 130 } } });
_ = ui.slider("h_slider", &h_slider_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});
@ -293,13 +294,13 @@ fn widgets(arena: *oc.Arena) void {
//-------------------------------------------------------------------------------------
// Text box
//-------------------------------------------------------------------------------------
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{
.width = .{ .pixels = 305 },
.height = .text,
},
});
var textResult = oc.uiTextBox("text", arena.*, text);
var textResult = ui.textBox("text", arena.*, text);
if (textResult.changed) {
text_arena.clear();
text = text_arena.pushStr(textResult.text) catch {
@ -319,12 +320,12 @@ fn widgets(arena: *oc.Arena) void {
"Option 1",
"Option 2",
};
var select_popup_info = oc.UiSelectPopupInfo{
var select_popup_info = ui.SelectPopupInfo{
.selected_index = selected,
.options = &options,
.placeholder = "Select",
};
var selectResult = oc.uiSelectPopup("select", &select_popup_info);
var selectResult = ui.selectPopup("select", &select_popup_info);
if (selectResult.selected_index != selected) {
logPushf("Selected {s}", .{options[selectResult.selected_index.?]});
}
@ -334,33 +335,33 @@ fn widgets(arena: *oc.Arena) void {
// Scrollable panel
//-------------------------------------------------------------------------------------
{
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{
.width = .fill_parent,
.height = .{
.custom = .{ .kind = .Parent, .value = 1, .relax = 1, .min_size = 200 },
},
},
.bg_color = ui.theme.bg2,
.border_color = ui.theme.border,
.bg_color = ui_ctx.theme.bg2,
.border_color = ui_ctx.theme.border,
.border_size = 1,
.roundness = ui.theme.roundness_small,
.roundness = ui_ctx.theme.roundness_small,
});
_ = oc.uiPanelBegin("log", .{ .draw_background = true, .draw_border = true });
defer oc.uiPanelEnd();
_ = ui.panelBegin("log", .{ .draw_background = true, .draw_border = true });
defer ui.panelEnd();
{
oc.uiStyleNext(.{
ui.styleNext(.{
.layout = .{
.margin = .{ .x = 16, .y = 16 },
},
});
_ = oc.uiBoxBegin("contents", .{});
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("contents", .{});
defer _ = ui.boxEnd();
if (log_lines.list.empty()) {
oc.uiStyleNext(.{ .color = ui.theme.text2 });
_ = oc.uiLabel("Log");
ui.styleNext(.{ .color = ui_ctx.theme.text2 });
_ = ui.makeLabel("Log");
}
var i: i32 = 0;
@ -368,10 +369,10 @@ fn widgets(arena: *oc.Arena) void {
while (log_lines_iter.next()) |log_line| {
var buf: [15]u8 = undefined;
var id = std.fmt.bufPrint(&buf, "{d}", .{i}) catch unreachable;
_ = oc.uiBoxBegin(id, .{});
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin(id, .{});
defer _ = ui.boxEnd();
_ = oc.uiLabel(log_line.string.slice());
_ = ui.makeLabel(log_line.string.slice());
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_border_color: oc.Color = oc.Color.rgba(0.976, 0.976, 0.976, 0.35);
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 selected_width: f32 = 16;
var selected_height: f32 = 16;
var selected_roundness: f32 = 8;
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_when_status: oc.UiStatus = .{};
var selected_when_status: ui.Status = .{};
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_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
// 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
// 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);
defer columnEnd();
{
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{
.width = .fill_parent,
.height = .{ .pixels = 152 },
@ -423,21 +424,21 @@ fn styling(arena: *oc.Arena) void {
.layout = .{
.margin = .{ .x = 310, .y = 16 },
},
.bg_color = oc.ui_dark_theme.bg0,
.roundness = oc.ui_dark_theme.roundness_small,
.bg_color = ui.dark_theme.bg0,
.roundness = ui.dark_theme.roundness_small,
});
_ = oc.uiBoxBegin("styled_radios", .{ .draw_background = true, .draw_border = true });
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("styled_radios", .{ .draw_background = true, .draw_border = true });
defer _ = ui.boxEnd();
resetNextRadioGroupToDarkTheme(arena);
var unselected_tag = oc.uiTagMake("radio");
var unselected_pattern = oc.UiPattern.init();
var unselected_tag = ui.Tag.make("radio");
var unselected_pattern = ui.Pattern.init();
unselected_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } });
if (!unselected_when_status.empty()) {
unselected_pattern.push(arena, .{ .op = .And, .sel = .{ .status = unselected_when_status } });
}
oc.uiStyleMatchAfter(unselected_pattern, .{
ui.styleMatchAfter(unselected_pattern, .{
.size = .{
.width = .{ .pixels = unselected_width },
.height = .{ .pixels = unselected_height },
@ -448,13 +449,13 @@ fn styling(arena: *oc.Arena) void {
.roundness = unselected_roundness,
});
var selected_tag = oc.uiTagMake("radio_selected");
var selected_pattern = oc.UiPattern.init();
var selected_tag = ui.Tag.make("radio_selected");
var selected_pattern = ui.Pattern.init();
selected_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } });
if (!selected_when_status.empty()) {
selected_pattern.push(arena, .{ .op = .And, .sel = .{ .status = selected_when_status } });
}
oc.uiStyleMatchAfter(selected_pattern, .{
ui.styleMatchAfter(selected_pattern, .{
.size = .{
.width = .{ .pixels = selected_width },
.height = .{ .pixels = selected_height },
@ -464,10 +465,10 @@ fn styling(arena: *oc.Arena) void {
.roundness = selected_roundness,
});
var label_tag = oc.uiTagMake("label");
var label_pattern = oc.UiPattern.init();
var label_tag = ui.Tag.make("label");
var label_pattern = ui.Pattern.init();
label_pattern.push(arena, .{ .sel = .{ .tag = label_tag } });
oc.uiStyleMatchAfter(label_pattern, .{
ui.styleMatchAfter(label_pattern, .{
.color = label_font_color,
.font = label_font.*,
.font_size = label_font_size,
@ -478,31 +479,31 @@ fn styling(arena: *oc.Arena) void {
"Am",
"Stylish",
};
var radio_group_info = oc.UiRadioGroupInfo{
var radio_group_info = ui.RadioGroupInfo{
.selected_index = styling_selected_radio,
.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;
}
{
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 32 } });
_ = oc.uiBoxBegin("controls", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 32 } });
_ = ui.boxBegin("controls", .{});
defer _ = ui.boxEnd();
{
oc.uiStyleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } });
_ = oc.uiBoxBegin("unselected", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } });
_ = ui.boxBegin("unselected", .{});
defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 16 });
_ = oc.uiLabel("Radio style");
ui.styleNext(.{ .font_size = 16 });
_ = ui.makeLabel("Radio style");
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("size", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = ui.boxBegin("size", .{});
defer _ = ui.boxEnd();
var width_slider = (unselected_width - 8) / 16;
labeledSlider("Width", &width_slider);
@ -518,9 +519,9 @@ fn styling(arena: *oc.Arena) void {
}
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("background", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = ui.boxBegin("background", .{});
defer _ = ui.boxEnd();
labeledSlider("Background R", &unselected_bg_color.r);
labeledSlider("Background G", &unselected_bg_color.g);
@ -529,9 +530,9 @@ fn styling(arena: *oc.Arena) void {
}
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("border", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = ui.boxBegin("border", .{});
defer _ = ui.boxEnd();
labeledSlider("Border R", &unselected_border_color.r);
labeledSlider("Border G", &unselected_border_color.g);
@ -544,22 +545,22 @@ fn styling(arena: *oc.Arena) void {
unselected_border_size = border_size_slider * 5;
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 10 } });
_ = oc.uiBoxBegin("status_override", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 10 } });
_ = ui.boxBegin("status_override", .{});
defer _ = ui.boxEnd();
_ = oc.uiLabel("Override");
_ = ui.makeLabel("Override");
var status_options = [_][]const u8{
"Always",
"When hovering",
"When active",
};
var status_info = oc.UiRadioGroupInfo{
var status_info = ui.RadioGroupInfo{
.selected_index = unselected_status_index,
.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_when_status = switch (unselected_status_index.?) {
0 => .{},
@ -571,17 +572,17 @@ fn styling(arena: *oc.Arena) void {
}
{
oc.uiStyleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } });
_ = oc.uiBoxBegin("selected", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .axis = .Y, .spacing = 16 } });
_ = ui.boxBegin("selected", .{});
defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 16 });
_ = oc.uiLabel("Radio selected style");
ui.styleNext(.{ .font_size = 16 });
_ = ui.makeLabel("Radio selected style");
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("size", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = ui.boxBegin("size", .{});
defer _ = ui.boxEnd();
var width_slider = (selected_width - 8) / 16;
labeledSlider("Width", &width_slider);
@ -597,9 +598,9 @@ fn styling(arena: *oc.Arena) void {
}
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("color", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = ui.boxBegin("color", .{});
defer _ = ui.boxEnd();
labeledSlider("Center R", &selected_center_color.r);
labeledSlider("Center G", &selected_center_color.g);
@ -608,9 +609,9 @@ fn styling(arena: *oc.Arena) void {
}
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 4 } });
_ = oc.uiBoxBegin("background", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 4 } });
_ = ui.boxBegin("background", .{});
defer _ = ui.boxEnd();
labeledSlider("Background R", &selected_bg_color.r);
labeledSlider("Background G", &selected_bg_color.g);
@ -619,25 +620,25 @@ fn styling(arena: *oc.Arena) void {
}
{
oc.uiStyleNext(.{ .layout = .{ .spacing = 10 } });
_ = oc.uiBoxBegin("status_override", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .spacing = 10 } });
_ = ui.boxBegin("status_override", .{});
defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .size = .{ .height = .{ .pixels = 30 } } });
_ = oc.uiBoxMake("spacer", .{});
ui.styleNext(.{ .size = .{ .height = .{ .pixels = 30 } } });
_ = ui.boxMake("spacer", .{});
_ = oc.uiLabel("Override");
_ = ui.makeLabel("Override");
var status_options = [_][]const u8{
"Always",
"When hovering",
"When active",
};
var status_info = oc.UiRadioGroupInfo{
var status_info = ui.RadioGroupInfo{
.selected_index = selected_status_index,
.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_when_status = switch (selected_status_index.?) {
0 => .{},
@ -649,22 +650,22 @@ fn styling(arena: *oc.Arena) void {
}
{
oc.uiStyleNext(.{ .layout = .{ .axis = .Y, .spacing = 10 } });
_ = oc.uiBoxBegin("label", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .axis = .Y, .spacing = 10 } });
_ = ui.boxBegin("label", .{});
defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 16 });
_ = oc.uiLabel("Label style");
ui.styleNext(.{ .font_size = 16 });
_ = ui.makeLabel("Label style");
{
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = oc.uiBoxBegin("font_color", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = ui.boxBegin("font_color", .{});
defer _ = ui.boxEnd();
oc.uiStyleMatchAfter(oc.UiPattern.owner(), .{
ui.styleMatchAfter(ui.Pattern.owner(), .{
.size = .{ .width = .{ .pixels = 100 } },
});
_ = oc.uiLabel("Font color");
_ = ui.makeLabel("Font color");
var color_names = [_][]const u8{
"Default",
@ -677,33 +678,33 @@ fn styling(arena: *oc.Arena) void {
"Green",
};
var colors = [_]oc.Color{
oc.ui_dark_theme.text0,
oc.ui_dark_theme.palette.red5,
oc.ui_dark_theme.palette.orange5,
oc.ui_dark_theme.palette.amber5,
oc.ui_dark_theme.palette.yellow5,
oc.ui_dark_theme.palette.lime5,
oc.ui_dark_theme.palette.light_green5,
oc.ui_dark_theme.palette.green5,
ui.dark_theme.text0,
ui.dark_theme.palette.red5,
ui.dark_theme.palette.orange5,
ui.dark_theme.palette.amber5,
ui.dark_theme.palette.yellow5,
ui.dark_theme.palette.lime5,
ui.dark_theme.palette.light_green5,
ui.dark_theme.palette.green5,
};
var color_info = oc.UiSelectPopupInfo{
var color_info = ui.SelectPopupInfo{
.selected_index = label_font_color_selected,
.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 = colors[label_font_color_selected.?];
}
{
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = oc.uiBoxBegin("font", .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = ui.boxBegin("font", .{});
defer _ = ui.boxEnd();
oc.uiStyleMatchAfter(oc.UiPattern.owner(), .{
ui.styleMatchAfter(ui.Pattern.owner(), .{
.size = .{ .width = .{ .pixels = 100 } },
});
_ = oc.uiLabel("Font");
_ = ui.makeLabel("Font");
var font_names = [_][]const u8{
"Regular",
@ -713,11 +714,11 @@ fn styling(arena: *oc.Arena) void {
&font_regular,
&font_bold,
};
var font_info = oc.UiSelectPopupInfo{
var font_info = ui.SelectPopupInfo{
.selected_index = label_font_selected,
.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 = fonts[label_font_selected.?];
}
@ -730,7 +731,7 @@ fn styling(arena: *oc.Arena) void {
}
fn columnBegin(header: []const u8, widthFraction: f32) void {
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{
.width = .{
.custom = .{ .kind = .Parent, .value = widthFraction, .relax = 1 },
@ -742,26 +743,26 @@ fn columnBegin(header: []const u8, widthFraction: f32) void {
.margin = .{ .y = 8 },
.spacing = 24,
},
.bg_color = ui.theme.bg1,
.border_color = ui.theme.border,
.bg_color = ui_ctx.theme.bg1,
.border_color = ui_ctx.theme.border,
.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 },
.layout = .{ .alignment = .{ .x = .Center } },
});
_ = oc.uiBoxBegin("header", .{});
defer _ = oc.uiBoxEnd();
_ = ui.boxBegin("header", .{});
defer _ = ui.boxEnd();
oc.uiStyleNext(.{ .font_size = 18 });
_ = oc.uiLabel(header);
ui.styleNext(.{ .font_size = 18 });
_ = ui.makeLabel(header);
}
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{
.width = .fill_parent,
.height = .{
@ -774,28 +775,28 @@ fn columnBegin(header: []const u8, widthFraction: f32) void {
.spacing = 24,
},
});
_ = oc.uiBoxBegin("contents", .{});
_ = ui.boxBegin("contents", .{});
}
fn columnEnd() void {
_ = oc.uiBoxEnd(); // contents
_ = oc.uiBoxEnd(); // column
_ = ui.boxEnd(); // contents
_ = ui.boxEnd(); // column
}
fn labeledSlider(label: []const u8, value: *f32) void {
oc.uiStyleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = oc.uiBoxBegin(label, .{});
defer _ = oc.uiBoxEnd();
ui.styleNext(.{ .layout = .{ .axis = .X, .spacing = 8 } });
_ = ui.boxBegin(label, .{});
defer _ = ui.boxEnd();
oc.uiStyleMatchAfter(oc.UiPattern.owner(), .{
ui.styleMatchAfter(ui.Pattern.owner(), .{
.size = .{ .width = .{ .pixels = 100 } },
});
_ = oc.uiLabel(label);
_ = ui.makeLabel(label);
oc.uiStyleNext(.{
ui.styleNext(.{
.size = .{ .width = .{ .pixels = 100 } },
});
_ = oc.uiSlider("slider", value);
_ = ui.slider("slider", value);
}
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
/// 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 {
var unselected_tag = oc.uiTagMake("radio");
var unselected_pattern = oc.UiPattern.init();
var unselected_tag = ui.Tag.make("radio");
var unselected_pattern = ui.Pattern.init();
unselected_pattern.push(arena, .{ .sel = .{ .tag = unselected_tag } });
oc.uiStyleMatchAfter(unselected_pattern, .{
.border_color = oc.ui_dark_theme.text3,
ui.styleMatchAfter(unselected_pattern, .{
.border_color = ui.dark_theme.text3,
.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, .{ .op = .And, .sel = .{ .status = .{ .hover = true } } });
oc.uiStyleMatchAfter(unselected_hover_pattern, .{
.bg_color = oc.ui_dark_theme.fill0,
.border_color = oc.ui_dark_theme.primary,
ui.styleMatchAfter(unselected_hover_pattern, .{
.bg_color = ui.dark_theme.fill0,
.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, .{ .op = .And, .sel = .{ .status = .{ .active = true } } });
oc.uiStyleMatchAfter(unselected_active_pattern, .{
.bg_color = oc.ui_dark_theme.fill1,
.border_color = oc.ui_dark_theme.primary,
ui.styleMatchAfter(unselected_active_pattern, .{
.bg_color = ui.dark_theme.fill1,
.border_color = ui.dark_theme.primary,
});
var selected_tag = oc.uiTagMake("radio_selected");
var selected_pattern = oc.UiPattern.init();
var selected_tag = ui.Tag.make("radio_selected");
var selected_pattern = ui.Pattern.init();
selected_pattern.push(arena, .{ .sel = .{ .tag = selected_tag } });
oc.uiStyleMatchAfter(selected_pattern, .{
.color = oc.ui_dark_theme.palette.white,
.bg_color = oc.ui_dark_theme.primary,
ui.styleMatchAfter(selected_pattern, .{
.color = ui.dark_theme.palette.white,
.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, .{ .op = .And, .sel = .{ .status = .{ .hover = true } } });
oc.uiStyleMatchAfter(selected_hover_pattern, .{
.bg_color = oc.ui_dark_theme.primary_hover,
ui.styleMatchAfter(selected_hover_pattern, .{
.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, .{ .op = .And, .sel = .{ .status = .{ .active = true } } });
oc.uiStyleMatchAfter(selected_active_pattern, .{
.bg_color = oc.ui_dark_theme.primary_active,
ui.styleMatchAfter(selected_active_pattern, .{
.bg_color = ui.dark_theme.primary_active,
});
}

2273
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
//------------------------------------------------------------------------------
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_theme* theme = ui->theme;
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 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);
}
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_theme* theme = ui->theme;
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);
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);
}
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_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_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_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);
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_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_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue);
ORCA_API oc_ui_box* oc_ui_slider(const char* name, f32* value);
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_panel_begin(const char* name, oc_ui_flags flags);
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())
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);
#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_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
{