ed/SectrPrototype
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup and setup of drop down widget

Browse Source 
Got an initial variant of the drop down widget, not completely set on it..
I put some more time to figuring out how I'm going to be ideomatically constructing the widgets. screen.odin I think its getting pretty close to what it will be like.
I'm ready to start lifting the input box. I'll be adding the constraints when I lift it.

Added the option to toggle the debug text in screenspace
Added the fixes from the ui_layout_children_horizontally for margins to ui_layout_children_vertically

Known issue:
There is a bug with test_whitespace that forced me todo a null check on a box. Not sure why.
It needs to be redone anyway.. (compose it with the h/vboxes instead)

There is some sublime files added in, started to use it.
This commit is contained in:
Edward R. Gonzalez
2024-05-20 22:05:52 -04:00
parent cdfc3d65bb
commit e5be246d30
23 changed files with 23871 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
code/sectr/app/scratch.odin
View File

@ -8,6 +8,7 @@ DebugData :: struct {
square_size : i32,
square_pos : rl.Vector2,
debug_text_vis : b32,
draw_debug_text_y : f32,
cursor_locked : b32,

356
code/sectr/app/screen.odin
View File

@ -20,8 +20,9 @@ UI_ScreenState :: struct
},
settings_menu : struct
{
pos, size, min_size : Vec2,
container : UI_Widget,
cfg_drop_down : UI_DropDown,
pos, size, min_size : Vec2,
is_open : b32,
is_maximized : b32,
},
@ -34,21 +35,16 @@ ui_screen_tick :: proc() {
ui_graph_build( & screen_ui )
ui := ui_context
ui_floating_manager_begin( & screen_ui.floating )
{
ui_floating("Menu Bar", ui_screen_menu_bar)
ui_floating("Settings Menu", ui_screen_settings_menu)
}
ui_floating_manager_end()
ui_floating_manager( & screen_ui.floating )
ui_floating("Menu Bar", ui_screen_menu_bar)
ui_floating("Settings Menu", ui_screen_settings_menu)
}
ui_screen_menu_bar :: proc( captures : rawptr = nil ) -> (should_raise : b32 = false )
{
profile("App Menu Bar")
fmt :: str_fmt_alloc
@(deferred_none = ui_theme_pop)
ui_theme_app_menu_bar_default :: proc()
theme_app_menu_bar :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -63,7 +59,7 @@ ui_screen_menu_bar :: proc( captures : rawptr = nil ) -> (should_raise : b32 = f
font_size = 12,
margins = {0, 0, 0, 0},
padding = {0, 0, 0, 0},
border_width = 0.6,
border_width = 1.0,
pos = {0, 0},
size = range2({},{})
}
@ -93,58 +89,46 @@ ui_screen_menu_bar :: proc( captures : rawptr = nil ) -> (should_raise : b32 = f
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
using state := get_state()
using screen_ui
{
using screen_ui.menu_bar
ui_theme_app_menu_bar_default()
container = ui_hbox_begin( .Left_To_Right, "Menu Bar" )
ui_parent(container)
{
using container
layout.flags = {.Fixed_Position_X, .Fixed_Position_Y, .Fixed_Width, .Fixed_Height, .Origin_At_Anchor_Center}
layout.pos = pos
layout.size = range2( size, {})
text = str_intern("menu_bar")
using screen_ui.menu_bar
scope(theme_app_menu_bar)
container = ui_hbox( .Left_To_Right, "Menu Bar" ); {
using container
layout.flags = {.Fixed_Position_X, .Fixed_Position_Y, .Fixed_Width, .Fixed_Height, .Origin_At_Anchor_Center}
layout.pos = pos
layout.size = range2( size, {})
text = str_intern("menu_bar")
}
scope(theme_transparent)
move_box : UI_Widget; {
scope(theme_button)
move_box = ui_button("Move Box")
using move_box
layout.size.min.x = 20
if active {
pos += input.mouse.delta
should_raise = true
}
}
ui_theme_btn()
move_box := ui_button("Move Box");
{
using move_box
if active {
pos += input.mouse.delta
should_raise = true
}
layout.anchor.ratio.x = 1.0
}
spacer := ui_spacer("Menu Bar: Move Spacer")
spacer.layout.flags |= {.Fixed_Width}
spacer.layout.size.min.x = 30
spacer := ui_spacer("Menu Bar: Move Spacer")
spacer.layout.flags |= {.Fixed_Width}
spacer.layout.size.min.x = 30
// TODO(Ed): Implement an external composition for theme interpolation using the settings btn
settings_btn.widget = ui_button("Menu Bar: Settings Btn")
{
using settings_btn
text = str_intern("Settings")
layout.flags = {
.Scale_Width_By_Height_Ratio,
// .Fixed_Width
}
layout.size.ratio.x = 2.0
if pressed {
screen_ui.settings_menu.is_open = true
}
}
spacer = ui_spacer("Menu Bar: End Spacer")
spacer.layout.anchor.ratio.x = 2.0
ui_hbox_end(container, compute_layout = false)
Build_Settings_Btn: {
scope(theme_button)
using settings_btn
widget = ui_button("Menu Bar: Settings Btn")
text = str_intern("Settings")
layout.flags = { .Scale_Width_By_Height_Ratio }
layout.size.ratio.x = 2.0
if pressed do screen_ui.settings_menu.is_open = true
}
return
}
@ -154,6 +138,7 @@ ui_screen_settings_menu :: proc( captures : rawptr = nil ) -> ( should_raise : b
profile("Settings Menu")
using state := get_state()
using state.screen_ui
if ! settings_menu.is_open do return
app_color := app_color_theme()
@ -161,169 +146,182 @@ ui_screen_settings_menu :: proc( captures : rawptr = nil ) -> ( should_raise : b
if size.x < min_size.x do size.x = min_size.x
if size.y < min_size.y do size.y = min_size.y
ui_theme_window_panel()
container = ui_widget("Settings Menu", {}); {
using container
layout.flags = { .Fixed_Width, .Fixed_Height, .Fixed_Position_X, .Fixed_Position_Y, .Origin_At_Anchor_Center }
layout.pos = pos
layout.size = range2( size, {})
Construct_Container:
{
scope(theme_window_panel)
container = ui_widget("Settings Menu", {}); {
using container
layout.flags = { .Fixed_Width, .Fixed_Height, .Fixed_Position_X, .Fixed_Position_Y, .Origin_At_Anchor_Center }
layout.pos = pos
layout.size = range2( size, {})
}
if settings_menu.is_maximized {
using container
layout.flags = {.Origin_At_Anchor_Center }
layout.pos = {}
}
should_raise |= ui_resizable_handles( & container, & pos, & size)
}
ui_parent(container)
if settings_menu.is_maximized {
using container
layout.flags = {.Origin_At_Anchor_Center }
layout.pos = {}
}
should_raise |= ui_resizable_handles( & container, & pos, & size)
vbox := ui_vbox_begin( .Top_To_Bottom, "Settings Menu: VBox", {.Mouse_Clickable}, compute_layout = true)
{
should_raise |= b32(vbox.active)
ui_parent(vbox)
ui_theme_window_bar()
frame_bar := ui_hbox_begin(.Left_To_Right, "Settings Menu: Frame Bar", { .Mouse_Clickable })
Frame_Bar:
{
ui_parent(frame_bar)
ui_theme_text()
title := ui_text("Settings Menu: Title", str_intern("Settings Menu"), {.Disabled}); {
using title
layout.anchor.ratio.x = 1.0
layout.margins = { 0, 0, 15, 0}
layout.font_size = 16
}
ui_theme_window_bar_btn()
maximize_btn := ui_button("Settings Menu: Maximize Btn"); {
using maximize_btn
if maximize_btn.pressed {
settings_menu.is_maximized = ~settings_menu.is_maximized
should_raise = true
scope(theme_window_bar)
frame_bar := ui_hbox(.Left_To_Right, "Settings Menu: Frame Bar", { .Mouse_Clickable })
{
ui_parent(frame_bar)
scope(theme_text)
title := ui_text("Settings Menu: Title", str_intern("Settings Menu"), {.Disabled}); {
using title
layout.anchor.ratio.x = 1.0
layout.margins = { 0, 0, 15, 0}
layout.font_size = 16
}
scope(theme_window_bar_btn)
maximize_btn := ui_button("Settings Menu: Maximize Btn"); {
using maximize_btn
if maximize_btn.pressed {
settings_menu.is_maximized = ~settings_menu.is_maximized
should_raise = true
}
if settings_menu.is_maximized do text = str_intern("min")
else do text = str_intern("max")
}
close_btn := ui_button("Settings Menu: Close Btn"); {
using close_btn
text = str_intern("close")
if close_btn.hot do style.bg_color = app_color.window_btn_close_bg_hot
if close_btn.pressed do settings_menu.is_open = false
}
if settings_menu.is_maximized do text = str_intern("min")
else do text = str_intern("max")
}
close_btn := ui_button("Settings Menu: Close Btn"); {
using close_btn
text = str_intern("close")
if close_btn.hot do style.bg_color = app_color.window_btn_close_bg_hot
if close_btn.pressed do settings_menu.is_open = false
if frame_bar.active {
pos += input.mouse.delta
should_raise = true
}
ui_hbox_end(frame_bar, compute_layout = true)
}
if frame_bar.active {
pos += input.mouse.delta
should_raise = true
}
@static config_drop_down_open := false
ui_theme_drop_down()
drop_down_bar := ui_hbox_begin(.Left_To_Right, "settings_menu.vbox: config drop_down_bar", {.Mouse_Clickable })
if ui_drop_down( & cfg_drop_down, "settings_menu.config", str_intern("App Config"), vb_compute_layout = true).is_open
{
ui_parent_push(drop_down_bar)
Engien_Refresh_Hz:
{
using drop_down_bar
text = str_intern("drop_down_bar")
layout.text_alignment = {1, 0}
layout.anchor.ratio.y = 1.0
}
ui_theme_text()
title := ui_text("drop_down_bar.btn", str_intern("drop_down_bar.btn")); {
using title
text = str_intern("App Config")
style.text_color = drop_down_bar.style.text_color
layout.alignment = {0.0, 0.0}
layout.text_alignment = {0.0, 0.5}
layout.anchor.ratio.x = 1.0
}
ui_parent_pop()
ui_hbox_end(drop_down_bar, compute_layout = true)
if drop_down_bar.pressed do config_drop_down_open = !config_drop_down_open
}
if config_drop_down_open
{
{
ui_theme_table_row(is_even = false)
scope(theme_table_row(is_even = false))
hb := ui_hbox(.Left_To_Right, "settings_menu.engine_refresh_hz.hb"); { using hb
layout.size.min = {0, 30}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
ui_theme_text(); title := ui_text("settings_menu.engine_refresh_hz.title", str_intern("Engine Refresh Hz")); { using title
layout.anchor.ratio.x = 1.0
layout.margins.left = 10
layout.text_alignment = {0, 0.5}
title : UI_Widget; {
scope(theme_text)
title = ui_text("settings_menu.engine_refresh_hz.title", str_intern("Engine Refresh Hz"))
using title
layout.anchor.ratio.x = 1.0
layout.margins.left = 10
layout.text_alignment = {0, 0.5}
}
input_box := ui_widget("settings_menu.engine_refresh.input_box", {.Mouse_Clickable, .Focusable, .Click_To_Focus}); { using input_box
layout.flags = {.Fixed_Width}
layout.margins.left = 5
layout.padding.right = 10
layout.size.min.x = 80
if input_box.active do style.bg_color = app_color.input_box_bg_active
else if input_box.hot do style.bg_color = app_color.input_box_bg_hot
else do style.bg_color = app_color.input_box_bg
input_box := ui_widget("settings_menu.engine_refresh.input_box", {.Mouse_Clickable, .Focusable, .Click_To_Focus}); {
using input_box
layout.flags = {.Fixed_Width}
layout.margins.left = 5
layout.padding.right = 10
layout.size.min.x = 80
style.corner_radii[0] = 0.35
}
@static value_str : Array(rune)
if value_str.header == nil {
error : AllocatorError
value_str, error = array_init_reserve(rune, persistent_slab_allocator(), Kilo)
ensure(error == AllocatorError.None, "Failed to allocate array for value_str of input_box")
}
if input_box.pressed {
array_clear( value_str )
}
if input_box.active {
array_append( & value_str, input.keyboard_events.chars_pressed )
array_clear( input.keyboard_events.chars_pressed )
}
else if input_box.was_active {
value, success := parse_uint(to_string(array_to_slice(value_str)))
if success {
config.engine_refresh_hz = value
if input_box.active do style.bg_color = app_color.input_box_bg_active
else if input_box.hot do style.bg_color = app_color.input_box_bg_hot
else do style.bg_color = app_color.input_box_bg
@static value_str : Array(rune)
if value_str.header == nil {
error : AllocatorError
value_str, error = array_init_reserve(rune, persistent_slab_allocator(), Kilo)
ensure(error == AllocatorError.None, "Failed to allocate array for value_str of input_box")
}
if input_box.pressed {
array_clear( value_str )
}
if input_box.active {
array_append( & value_str, input.keyboard_events.chars_pressed )
array_clear( input.keyboard_events.chars_pressed )
}
else if input_box.was_active
{
value, success := parse_uint(to_string(array_to_slice(value_str)))
if success {
config.engine_refresh_hz = value
}
}
else
{
array_clear( value_str)
array_append( & value_str, to_runes(str_fmt_alloc("%v", config.engine_refresh_hz)))
}
ui_parent(input_box)
value_txt : UI_Widget; {
scope(theme_text)
value_txt = ui_text("settings_menu.engine_refresh.input_box.value", to_str_runes_pair(array_to_slice(value_str)))
using value_txt
layout.alignment = {1, 0.0}
layout.text_alignment = {0, 0.5}
layout.anchor.left = 1.0
layout.flags = {.Fixed_Width}
layout.size.min = cast(Vec2) measure_text_size( value_txt.text.str, value_txt.style.font, value_txt.layout.font_size, 0 )
}
}
else {
array_clear( value_str)
array_append( & value_str, to_runes(str_fmt_alloc("%v", config.engine_refresh_hz)))
}
// input_box
{
ui_parent(input_box)
value_txt := ui_text("settings_menu.engine_refresh.refresh_value", to_str_runes_pair(array_to_slice(value_str)))
value_txt.layout.text_alignment = vec2(1, 0.5)
}
spacer := ui_spacer("settings_menu.engine_refresh.end_spacer")
spacer.layout.flags = {.Fixed_Width}
spacer.layout.size.min.x = 10
// input_text := ui_text("settings_menu.engine_refresh", str_fmt_alloc(value_str))
}
// scope(theme_transparent)
// spacer := ui_spacer("settings_menu.engine_refresh.end_spacer")
// spacer.layout.flags = {.Fixed_Height}
// spacer.layout.size.min.y = 10
Min_Zoom:
{
ui_theme_table_row(is_even = true)
hb := ui_hbox(.Left_To_Right, "settings_menu.cam_min_zoom.hb"); { using hb
scope( theme_table_row(is_even = true))
hb := ui_hbox(.Left_To_Right, "settings_menu.cam_min_zoom.hb"); {
using hb
layout.size.min = {0, 30}
layout.flags = {.Fixed_Height}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
ui_theme_text(); title := ui_text("settings_menu.cam_min_zoom.title", str_intern("Camera: Min Zoom")); { using title
scope(theme_text)
title := ui_text("settings_menu.cam_min_zoom.title", str_intern("Camera: Min Zoom")); {
using title
layout.anchor.ratio.x = 1.0
layout.margins.left = 10
}
}
Max_Zoom:
{
ui_theme_table_row(is_even = false)
hb := ui_hbox(.Left_To_Right, "settings_menu.cam_max_zoom.hb"); { using hb
scope( theme_table_row(is_even = false))
hb := ui_hbox(.Left_To_Right, "settings_menu.cam_max_zoom.hb"); {
using hb
layout.size.min = {0, 30}
layout.flags = {.Fixed_Height}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
ui_theme_text(); title := ui_text("settings_menu.cam_max_zoom.title", str_intern("Camera: Max Zoom")); { using title
scope(theme_text)
title := ui_text("settings_menu.cam_max_zoom.title", str_intern("Camera: Max Zoom")); {
using title
layout.anchor.ratio.x = 1.0
layout.margins.left = 10
}
}
}
ui_vbox_end(vbox, compute_layout = false )
}
ui_vbox_end(vbox, compute_layout = false )
return
}

61
code/sectr/app/ui_theme.odin
View File

@ -4,11 +4,13 @@ package sectr
UI Themes: Comprise of UI_Box's layout & style
Provides presets for themes and their interface for manipulating the combo stacks in UI_State in pairs
The preset UI_Theme structs are populated using theme_<name> procedures.
There are boilerplate procedures that do ui_theme( theme_<name>()) for the user as ui_theme_<name>().
*/
// TODO(Ed): Eventually this will have a configuration wizard, and we'll save the presets
@(deferred_none = ui_theme_pop)
ui_theme_btn :: proc()
theme_button :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -54,12 +56,10 @@ ui_theme_btn :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_drop_down :: proc()
theme_drop_down_btn :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -106,16 +106,14 @@ ui_theme_drop_down :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_table_row :: proc(is_even : bool)
theme_table_row :: proc( is_even : bool ) -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
// if ! loaded
if ! loaded
{
app_color := app_color_theme()
table_bg : Color
@ -163,16 +161,14 @@ ui_theme_table_row :: proc(is_even : bool)
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_window_bar :: proc()
theme_window_bar :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
if ! loaded || true
if ! loaded
{
app_color := app_color_theme()
layout := UI_Layout {
@ -217,12 +213,10 @@ ui_theme_window_bar :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_window_bar_title :: proc()
theme_window_bar_title :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -267,12 +261,10 @@ ui_theme_window_bar_title :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_window_bar_btn :: proc()
theme_window_bar_btn :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -318,12 +310,10 @@ ui_theme_window_bar_btn :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_window_panel :: proc()
theme_window_panel :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -368,12 +358,10 @@ ui_theme_window_panel :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_transparent :: proc()
theme_transparent :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -418,12 +406,10 @@ ui_theme_transparent :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}
@(deferred_none = ui_theme_pop)
ui_theme_text :: proc()
theme_text :: proc() -> UI_Theme
{
@static theme : UI_Theme
@static loaded : b32 = false
@ -468,6 +454,5 @@ ui_theme_text :: proc()
theme = UI_Theme { layout_combo, style_combo }
loaded = true
}
ui_layout_push(theme.layout)
ui_style_push(theme.style)
return theme
}