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

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
}
}