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

May have figured out auto-layout for ordering children (horizontally or vertically)

Browse Source 
I'm going to leave the manual compute_layout options for now but their going to be disabled by default.
This commit is contained in:
Edward R. Gonzalez
2024-12-30 23:05:15 -05:00
parent d61bd8f161
commit 2a89778c0f
10 changed files with 128 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,7 +98,7 @@ ui_screen_menu_bar_builder :: proc( captures : rawptr = nil ) -> (should_raise :
scope(theme_app_menu_bar)
container = ui_hbox( .Left_To_Right, "Menu Bar" ); {
using container
layout.flags = {
layout.flags |= {
.Fixed_Position_X, .Fixed_Position_Y,
// .Min_Size_To_Content_X,
.Fixed_Width, .Fixed_Height,

66
code/sectr/app/settings_menu.odin
View File

@@ -83,7 +83,7 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
}
ui_parent(container)
vbox := ui_vbox_begin( .Top_To_Bottom, "Settings Menu: VBox", {.Mouse_Clickable}, compute_layout = true )
vbox := ui_vbox_begin( .Top_To_Bottom, "Settings Menu: VBox", {.Mouse_Clickable}, compute_layout = false )
{
should_raise |= b32(vbox.active)
ui_parent(vbox)
@@ -128,7 +128,7 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
}
// TODO(Ed): This will eventually be most likely generalized/compressed. For now its the main scope for implementing new widgets.
dd_app_config := ui_drop_down( & cfg_drop_down, "settings_menu.dd_app_config", str_intern("App Config"), vb_compute_layout = true);
dd_app_config := ui_drop_down( & cfg_drop_down, "settings_menu.dd_app_config", str_intern("App Config"), vb_compute_layout = false);
app_config_closed:
{
dd_app_config.title.layout.font_size = 12
@@ -142,9 +142,9 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
hb := ui_hbox(.Left_To_Right, str_intern_fmt("%v.hb", label).str); {
using hb
layout.size.min = {0, 25}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
layout.size.min = {0, 25}
layout.flags |= {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
scope(theme_text)
@@ -158,11 +158,11 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
ui_text_input_box( input_box, str_intern_fmt("%v.input_box", label).str, allocator = persistent_slab_allocator(), policy = input_policy )
{
using input_box
layout.flags = {.Fixed_Width}
layout.margins.left = 5
layout.padding.right = 5
layout.size.min.x = 80
style.corner_radii = { 3, 3, 3, 3 }
layout.flags |= {.Fixed_Width}
layout.margins.left = 5
layout.padding.right = 5
layout.size.min.x = 80
style.corner_radii = { 3, 3, 3, 3 }
}
}
@@ -172,9 +172,9 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
{
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, 25}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
layout.size.min = {0, 25}
layout.flags |= {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
title : UI_Widget; {
@@ -225,9 +225,9 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
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, 25}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
layout.size.min = {0, 25}
layout.flags |= {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
scope(theme_text)
title := ui_text("settings_menu.cam_min_zoom.title", str_intern("Camera: Min Zoom")); {
@@ -276,9 +276,9 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
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, 25}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
layout.size.min = {0, 25}
layout.flags |= {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
scope(theme_text)
title := ui_text("settings_menu.cam_max_zoom.title", str_intern("Camera: Max Zoom")); {
@@ -299,11 +299,11 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
ui_text_input_box( & max_zoom_inputbox, "settings_menu.cam_max_zoom.input_box", allocator = persistent_slab_allocator() )
{
using max_zoom_inputbox
layout.flags = {.Fixed_Width}
layout.margins.left = 5
layout.padding.right = 5
layout.size.min.x = 80
style.corner_radii = { 3, 3, 3, 3 }
layout.flags |= {.Fixed_Width}
layout.margins.left = 5
layout.padding.right = 5
layout.size.min.x = 80
style.corner_radii = { 3, 3, 3, 3 }
if was_active
{
@@ -328,9 +328,9 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
hb := ui_hbox(.Left_To_Right, "settings_menu.cam_zoom_mode.hb"); {
using hb
layout.size.min = {0, 35}
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
layout.size.min = {0, 35}
layout.flags |= {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
}
scope(theme_text)
@@ -344,7 +344,7 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
// TODO(Ed): This is technically a manual drop-down as the vbox within ui_dropdown is unusuable for attaching the buttons
// This can be alleviated if we add an option for the drop-down to support a floating vbox (fixed position computed, following drop_down btn)
// For now its buttons are attached to app_config vbox
mode_selector := ui_drop_down( & zoom_mode_drop_down, "settings_menu.cam_zoom_mode.drop_down", str_intern_fmt("%s", config.cam_zoom_mode), vb_compute_layout = true );
mode_selector := ui_drop_down( & zoom_mode_drop_down, "settings_menu.cam_zoom_mode.drop_down", str_intern_fmt("%s", config.cam_zoom_mode), vb_compute_layout = false );
mode_selector_closed:
{
using mode_selector
@@ -359,11 +359,11 @@ ui_settings_menu_builder :: proc( captures : rawptr = nil ) -> ( should_raise :
btn := ui_button(str_intern_fmt("settings_menu.cam_zoom_mode.%s.btn", entry).str)
{
using btn
layout.size.min = {100, 25}
layout.alignment = {1.0, 0}
layout.anchor.left = 1.0
layout.flags = {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
layout.size.min = {100, 25}
layout.alignment = {1.0, 0}
layout.anchor.left = 1.0
layout.flags |= {.Fixed_Height}
layout.padding = to_ui_layout_side(4)
ui_parent(btn)
scope(theme_text)

10
code/sectr/engine/client_api.odin
View File

@@ -271,8 +271,8 @@ startup :: proc( prof : ^SpallProfiler, persistent_mem, frame_mem, transient_mem
// path_squidgy_slimes := strings.concatenate( { Path_Assets, "Squidgy Slimes.ttf" } )
// font_squidgy_slimes = font_load( path_squidgy_slimes, 32.0, "Squidgy_Slime" )
path_firacode := strings.concatenate( { Path_Assets, "FiraCode-Regular.ttf" } )
font_firacode = font_load( path_firacode, 16.0, "FiraCode" )
// path_firacode := strings.concatenate( { Path_Assets, "FiraCode-Regular.ttf" } )
// font_firacode = font_load( path_firacode, 16.0, "FiraCode" )
// path_fira_cousine := strings.concatenate( { Path_Assets, "FiraCousine-Regular.ttf" } )
// font_fira_cousine = font_load( path_fira_cousine, 16.0, "Fira Cousine" )
@@ -289,8 +289,8 @@ startup :: proc( prof : ^SpallProfiler, persistent_mem, frame_mem, transient_mem
// path_rec_mono_linear := strings.concatenate( { Path_Assets, "RecMonoLinear-Regular-1.084.ttf" })
// font_rec_mono_linear = font_load( path_rec_mono_linear, 16.0, "RecMonoLinear Regular" )
// path_roboto_regular := strings.concatenate( { Path_Assets, "Roboto-Regular.ttf"} )
// font_roboto_regular = font_load( path_roboto_regular, 32.0, "Roboto Regular" )
path_roboto_regular := strings.concatenate( { Path_Assets, "Roboto-Regular.ttf"} )
font_roboto_regular = font_load( path_roboto_regular, 32.0, "Roboto Regular" )
// path_arial_unicode_ms := strings.concatenate( { Path_Assets, "Arial Unicode MS.ttf" } )
// font_arial_unicode_ms = font_load( path_arial_unicode_ms, 16.0, "Arial_Unicode_MS" )
@@ -298,7 +298,7 @@ startup :: proc( prof : ^SpallProfiler, persistent_mem, frame_mem, transient_mem
// path_arial_unicode_ms := strings.concatenate( { Path_Assets, "Arial Unicode MS.ttf" } )
// font_arial_unicode_ms = font_load( path_arial_unicode_ms, 16.0, "Arial_Unicode_MS" )
default_font = font_firacode
default_font = font_roboto_regular
log( "Default font loaded" )
}

4
code/sectr/ui/core/base.odin
View File

@@ -228,9 +228,9 @@ ui_graph_build_end :: proc( ui : ^UI_State )
render_queue := array_to_slice(ui.render_queue)
for current := root.first; current != nil; current = ui_box_tranverse_next_depth_first( current )
{
if ! current.computed.fresh {
// if ! current.computed.fresh {
ui_box_compute_layout( current )
}
// }
when UI_Render_Method == .Layers
{

2
code/sectr/ui/core/box.odin
View File

@@ -155,7 +155,7 @@ ui_box_tranverse_next_depth_first :: #force_inline proc "contextless" (box : ^UI
return nil
}
// Traveral pritorizes traversing a "anestry layer"
// Traveral pritorizes traversing a "ancestry layer"
ui_box_traverse_next_breadth_first :: proc "contextless" ( box : ^UI_Box, bypass_intersection_test := false, ctx : ^UI_State = nil ) -> (^UI_Box)
{
ctx := ctx

30
code/sectr/ui/core/layout.odin
View File

@@ -85,11 +85,11 @@ UI_LayoutSide :: struct {
// }
}
// Auto-Layout Flags (used by ui_box_compute_layout)
UI_LayoutFlag :: enum u32 {
// Will NOT perform scissor pass on children to their parent's bounds
// (Specified in the parent)
Dont_Clip_Children_To_bounds,
// Will perform scissor pass on children to their parent's bounds (Specified in the parent)
// Most boxes don't need a scissor pass so its opt-in.
Clip_Children_To_bounds,
// Enforces the box will always remain in a specific position relative to the parent.
// Overriding the anchors and margins.
@@ -105,6 +105,17 @@ UI_LayoutFlag :: enum u32 {
Fixed_Width,
Fixed_Height,
// If using any of the order children flags, choose only one (it doesn't make sense to use more than one)
// Will apply horizontal layout to children ordered left to right
Order_Children_Left_To_Right,
// Will apply horizontal layout to children ordered right to left
Order_Children_Right_To_Left,
// Will apply vertical layout to children ordered top to bottom
Order_Children_Top_To_Bottom,
// Will apply vertical layout to children ordered bottom to top
Order_Children_Bottom_To_Top,
// Enforces the widget will have a width specified as a ratio of its height (use the size.min/max.x to specify the scalar)
// If you wish for the width to stay fixed couple with the Fixed_Width flag
Scale_Width_By_Height_Ratio,
@@ -116,14 +127,13 @@ UI_LayoutFlag :: enum u32 {
// By Default, the origin is at the top left of the anchor's bounds (traditional)
Origin_At_Anchor_Center,
// TODO(Ed): Implement this!
// For this to work, the children must have a minimum size set & their size overall must be greater than the parent's minimum size
Size_To_Content,
// TODO(Ed): auto-layout for size to content not functioning yet for at least hbox and vbox. (use ui_size_to_content_ procs for now)
// Will set minimum size to the child with the furthest bounds on X and Y
Size_To_Content_XY,
// Will set minimum size to the child with the furthest bounds on X
Min_Size_To_Content_X,
Size_To_Content_X,
// Will set minimum size to the child with the furthest bounds on Y
Min_Size_To_Content_Y,
Size_To_Content_Y,
// Will size the box to its text.
Size_To_Text,

22
code/sectr/ui/core/layout_compute.odin
View File

@@ -102,7 +102,7 @@ ui_box_compute_layout :: proc( box : ^UI_Box,
border_offset := Vec2 { layout.border_width, layout.border_width }
// TODO(Ed): These are still WIP
if .Size_To_Content in layout.flags {
if .Size_To_Content_XY in layout.flags {
// Preemtively traverse the children of this parent and have them compute their layout.
// This parent will just set its size to the max bounding area of those children.
// This will recursively occur if child also depends on their content size from their children, etc.
@@ -114,7 +114,7 @@ ui_box_compute_layout :: proc( box : ^UI_Box,
)
adjusted_size = size_range2( resolved_bounds )
}
if .Min_Size_To_Content_X in layout.flags {
if .Size_To_Content_X in layout.flags {
children_bounds := ui_compute_children_overall_bounds(box)
resolved_bounds := range2(
children_bounds.min - { layout.padding.left, layout.padding.bottom } - border_offset,
@@ -122,7 +122,7 @@ ui_box_compute_layout :: proc( box : ^UI_Box,
)
adjusted_size.x = size_range2( resolved_bounds ).x
}
if .Min_Size_To_Content_Y in layout.flags {
if .Size_To_Content_Y in layout.flags {
children_bounds := ui_compute_children_overall_bounds(box)
// resolved_bounds := range2(
// children_bounds.min - { layout.padding.left, layout.padding.bottom } - border_offset,
@@ -203,6 +203,20 @@ ui_box_compute_layout :: proc( box : ^UI_Box,
computed.text_pos = text_pos
}
computed.fresh = true && !dont_mark_fresh
content_size := size_range2(computed.bounds)
if .Order_Children_Left_To_Right in layout.flags {
ui_layout_children_horizontally( box, .Left_To_Right )
}
else if .Order_Children_Right_To_Left in layout.flags {
ui_layout_children_horizontally( box, .Right_To_Left )
}
else if .Order_Children_Top_To_Bottom in layout.flags {
ui_layout_children_vertically( box, .Top_To_Bottom )
}
else if .Order_Children_Bottom_To_Top in layout.flags {
ui_layout_children_vertically( box, .Bottom_To_Top )
}
}
ui_compute_children_overall_bounds :: proc ( box : ^UI_Box ) -> ( children_bounds : Range2 )
@@ -222,7 +236,7 @@ ui_compute_children_overall_bounds :: proc ( box : ^UI_Box ) -> ( children_bound
ui_box_compute_layout_children :: proc( box : ^UI_Box )
{
for current := box.first; current != nil && current.prev != box; current = ui_box_tranverse_next_depth_first( current, parent_limit = box )
for current := box.first; current != nil && current.prev != box; current = ui_box_traverse_next_breadth_first( current, )
{
if current == box do return
if current.computed.fresh do continue

4
code/sectr/ui/layout_widget.odin
View File

@@ -7,7 +7,7 @@ import lalg "core:math/linalg"
Widget Layout Ops
*/
ui_layout_children_horizontally :: proc( container : ^UI_Box, direction : UI_LayoutDirection_X, width_ref : ^f32 )
ui_layout_children_horizontally :: proc( container : ^UI_Box, direction : UI_LayoutDirection_X, width_ref : ^f32 = nil )
{
container_width : f32
if width_ref != nil {
@@ -86,7 +86,7 @@ ui_layout_children_horizontally :: proc( container : ^UI_Box, direction : UI_Lay
}
}
ui_layout_children_vertically :: proc( container : ^UI_Box, direction : UI_LayoutDirection_Y, height_ref : ^f32 )
ui_layout_children_vertically :: proc( container : ^UI_Box, direction : UI_LayoutDirection_Y, height_ref : ^f32 = nil )
{
container_height : f32
if height_ref != nil {

52
code/sectr/ui/widgets.odin
View File

@@ -61,7 +61,7 @@ ui_drop_down_begin :: proc( drop_down : ^UI_DropDown, label : string, title_text
btn_theme : ^UI_Theme = nil,
title_theme : ^UI_Theme = nil,
vb_parent : ^UI_Box = nil,
vb_compute_layout := true )
vb_compute_layout := false )
{
using drop_down
@@ -106,7 +106,7 @@ ui_drop_down_end :: proc( drop_down : ^UI_DropDown ) {
ui_drop_down_end_auto :: proc( drop_down : ^UI_DropDown) {
if ! drop_down.is_open do return
ui_vbox_end(drop_down.vbox, compute_layout = true)
ui_vbox_end(drop_down.vbox, compute_layout = false)
ui_parent_pop()
}
#endregion("Drop Down")
@@ -138,27 +138,33 @@ ui_hbox_begin :: proc( direction : UI_LayoutDirection_X, label : string, flags :
hbox.box = ui_box_make( flags, label )
hbox.signal = ui_signal_from_box(hbox.box)
// ui_box_compute_layout(hbox)
switch direction {
case .Left_To_Right:
hbox.layout.flags |= { .Order_Children_Left_To_Right }
case .Right_To_Left:
hbox.layout.flags |= { .Order_Children_Right_To_Left }
}
return
}
// Auto-layout children
ui_hbox_end :: proc( hbox : UI_HBox, width_ref : ^f32 = nil, compute_layout := true )
ui_hbox_end :: proc( hbox : UI_HBox, width_ref : ^f32 = nil, compute_layout := false )
{
// profile(#procedure)
if compute_layout do ui_box_compute_layout(hbox.box, dont_mark_fresh = true)
ui_layout_children_horizontally( hbox.box, hbox.direction, width_ref )
// if compute_layout do ui_box_compute_layout(hbox.box, dont_mark_fresh = true)
// ui_layout_children_horizontally( hbox.box, hbox.direction, width_ref )
}
@(deferred_out = ui_hbox_end_auto)
ui_hbox :: #force_inline proc( direction : UI_LayoutDirection_X, label : string, flags : UI_BoxFlags = {} ) -> (hbox : UI_HBox) {
@(deferred_in_out= ui_hbox_end_auto)
ui_hbox :: #force_inline proc( direction : UI_LayoutDirection_X, label : string, flags : UI_BoxFlags = {}, width_ref : ^f32 = nil ) -> (hbox : UI_HBox) {
hbox = ui_hbox_begin(direction, label, flags)
ui_parent_push(hbox.box)
return
}
// Auto-layout children and pop parent from parent stack
ui_hbox_end_auto :: proc( hbox : UI_HBox ) {
ui_hbox_end(hbox)
ui_hbox_end_auto :: #force_inline proc( direction : UI_LayoutDirection_X, label : string, flags : UI_BoxFlags = {}, width_ref : ^f32 = nil, hbox : UI_HBox ) {
ui_hbox_end(hbox, width_ref)
ui_parent_pop()
}
#endregion("Horizontal Box")
@@ -191,7 +197,7 @@ ui_resizable_begin :: proc( label : string, flags : UI_BoxFlags = {},
corner_tl := true,
corner_br := true,
corner_bl := true,
compute_layout := true ) -> (resizable : UI_Resizable)
compute_layout := false ) -> (resizable : UI_Resizable)
{
resizable.box = ui_box_make(flags, label)
resizable.signal = ui_signal_from_box(resizable.box)
@@ -238,7 +244,7 @@ ui_resizable_handles :: proc( parent : ^UI_Widget, pos : ^Vec2, size : ^Vec2,
corner_tl := true,
corner_br := true,
corner_bl := true,
compute_layout := true) -> (drag_signal : b32)
compute_layout := false) -> (drag_signal : b32)
{
profile(#procedure)
handle_left : UI_Widget
@@ -758,31 +764,37 @@ UI_VBox :: struct {
direction : UI_LayoutDirection_Y,
}
ui_vbox_begin :: proc( direction : UI_LayoutDirection_Y, label : string, flags : UI_BoxFlags = {}, compute_layout := false ) -> (vbox : UI_VBox) {
ui_vbox_begin :: proc( direction : UI_LayoutDirection_Y, label : string, flags : UI_BoxFlags = {}, height_ref : ^f32 = nil, compute_layout := false ) -> (vbox : UI_VBox) {
// profile(#procedure)
vbox.direction = direction
vbox.box = ui_box_make( flags, label )
vbox.signal = ui_signal_from_box( vbox.box )
if compute_layout do ui_box_compute_layout(vbox, dont_mark_fresh = true)
// if compute_layout do ui_box_compute_layout(vbox, dont_mark_fresh = true)
switch direction {
case .Top_To_Bottom:
vbox.layout.flags |= { .Order_Children_Top_To_Bottom }
case .Bottom_To_Top:
vbox.layout.flags |= { .Order_Children_Bottom_To_Top }
}
return
}
// Auto-layout children
ui_vbox_end :: proc( vbox : UI_VBox, height_ref : ^f32 = nil, compute_layout := true ) {
ui_vbox_end :: proc( vbox : UI_VBox, height_ref : ^f32 = nil, compute_layout := false ) {
// profile(#procedure)
if compute_layout do ui_box_compute_layout(vbox, dont_mark_fresh = true)
ui_layout_children_vertically( vbox.box, vbox.direction, height_ref )
// if compute_layout do ui_box_compute_layout(vbox, dont_mark_fresh = true)
// ui_layout_children_vertically( vbox.box, vbox.direction, height_ref )
}
// Auto-layout children and pop parent from parent stack
ui_vbox_end_pop_parent :: proc( vbox : UI_VBox ) {
ui_vbox_end_pop_parent :: proc( direction : UI_LayoutDirection_Y, label : string, flags : UI_BoxFlags = {}, height_ref : ^f32 = nil, compute_layout := false, vbox : UI_VBox) {
ui_parent_pop()
ui_vbox_end(vbox)
}
@(deferred_out = ui_vbox_end_pop_parent)
ui_vbox :: #force_inline proc( direction : UI_LayoutDirection_Y, label : string, flags : UI_BoxFlags = {}, compute_layout := false ) -> (vbox : UI_VBox) {
vbox = ui_vbox_begin(direction, label, flags, compute_layout )
@(deferred_in_out = ui_vbox_end_pop_parent)
ui_vbox :: #force_inline proc( direction : UI_LayoutDirection_Y, label : string, flags : UI_BoxFlags = {}, height_ref : ^f32 = nil, compute_layout := false ) -> (vbox : UI_VBox) {
vbox = ui_vbox_begin(direction, label, flags, height_ref, compute_layout )
ui_parent_push(vbox.widget)
return
}

16
code/sectr/ui/window.odin
View File

@@ -85,7 +85,20 @@ ui_window_begin :: proc( window : ^UI_Window, label : string,
dragged, maximized, closed = ui_window_bar(window, title, closable, maximizable, draggable)
}
// child_bounds = bar.computed.bounds =
// child_position
switch child_layout
{
case .None:
case .Left_To_Right:
case .Right_to_Left:
case .Top_To_Bottom:
case .Bottom_To_Top:
}
return
}
@@ -128,7 +141,6 @@ ui_window_bar :: proc( window : ^UI_Window,
layout.anchor.ratio.x = 1.0
layout.margins = { 0, 0, 15, 0}
layout.font_size = 14
}
}