[wip] Take border size into account when doing layout. Border now takes space in the layout flow of the parent, and extends _around_ box's content (as defined by OC_UI_WIDTH/OC_UI_HEIGHT attributes)

martinfouilleul · martinfouilleul · commit 4ba6aef1deaa · 2025-02-11T12:01:56.000+01:00
diff --git a/samples/ui/src/main.c b/samples/ui/src/main.c
@@ -267,6 +267,7 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
                                 oc_ui_style_set_i32(OC_UI_AXIS, OC_UI_AXIS_X);
                                 oc_ui_style_set_i32(OC_UI_ALIGN_Y, OC_UI_ALIGN_CENTER);
                                 oc_ui_style_set_f32(OC_UI_SPACING, 8);
+                                oc_ui_style_set_f32(OC_UI_MARGIN_X, 2);
 
                                 //-------------------------------------------------------------------------
                                 // Checkbox
diff --git a/sketches/ui-bench/main.c b/sketches/ui-bench/main.c
@@ -116,6 +116,24 @@ i32 ui_runloop(void* user)
                 oc_ui_style_set_color(OC_UI_BG_COLOR, (oc_color){ 1, 0, 0, 1 });
             }
 
+            oc_ui_box("outer-box")
+            {
+                oc_ui_style_set_size(OC_UI_WIDTH, (oc_ui_size){ OC_UI_SIZE_PIXELS, 200 });
+                oc_ui_style_set_size(OC_UI_HEIGHT, (oc_ui_size){ OC_UI_SIZE_PIXELS, 200 });
+                oc_ui_style_set_color(OC_UI_BG_COLOR, (oc_color){ 1, 0, 0, 1 });
+
+                //                oc_ui_style_set_i32(OC_UI_ALIGN_Y, OC_UI_ALIGN_CENTER);
+
+                oc_ui_box("inner-box")
+                {
+                    oc_ui_style_set_size(OC_UI_WIDTH, (oc_ui_size){ OC_UI_SIZE_PIXELS, 100 });
+                    oc_ui_style_set_size(OC_UI_HEIGHT, (oc_ui_size){ OC_UI_SIZE_PIXELS, 100 });
+
+                    oc_ui_style_set_color(OC_UI_BG_COLOR, (oc_color){ 0, 1, 0, 1 });
+                    oc_ui_style_set_color(OC_UI_BORDER_COLOR, (oc_color){ 0, 0, 1, 0.5 });
+                    oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 50);
+                }
+            }
             oc_ui_box("container")
             {
                 oc_ui_style_set_size(OC_UI_WIDTH, (oc_ui_size){ OC_UI_SIZE_CHILDREN });
diff --git a/src/graphics/graphics_common.c b/src/graphics/graphics_common.c
@@ -1743,8 +1743,16 @@ void oc_rectangle_fill(f32 x, f32 y, f32 w, f32 h)
 
 void oc_rectangle_stroke(f32 x, f32 y, f32 w, f32 h)
 {
-    oc_rectangle_path(x, y, w, h);
-    oc_stroke();
+    oc_canvas_context_data* context = oc_currentCanvasContext;
+    if(context)
+    {
+        f32 oldExcursion = context->attributes.maxJointExcursion;
+        context->attributes.maxJointExcursion = 2 * context->attributes.width;
+        oc_rectangle_path(x, y, w, h);
+        oc_stroke();
+
+        context->attributes.maxJointExcursion = oldExcursion;
+    }
 }
 
 void oc_rounded_rectangle_path(f32 x, f32 y, f32 w, f32 h, f32 r)
diff --git a/src/ui/ui.c b/src/ui/ui.c
@@ -2435,11 +2435,11 @@ void oc_ui_layout_downward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int
                 if(box->style.layout.axis == axis)
                 {
                     count++;
-                    minSum += child->minSize[axis];
+                    minSum += child->minSize[axis] + 2 * child->style.borderSize;
                 }
                 else
                 {
-                    minSum = oc_max(minSum, child->minSize[axis]);
+                    minSum = oc_max(minSum, child->minSize[axis] + 2 * child->style.borderSize);
                 }
             }
         }
@@ -2480,7 +2480,7 @@ void oc_ui_layout_downward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int
             {
                 if(oc_ui_layout_downward_dependency(child, axis))
                 {
-                    sum += child->rect.c[2 + axis];
+                    sum += child->rect.c[2 + axis] + 2 * child->style.borderSize;
                 }
             }
         }
@@ -2490,12 +2490,11 @@ void oc_ui_layout_downward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int
             {
                 if(oc_ui_layout_downward_dependency(child, axis))
                 {
-                    sum = oc_max(sum, child->rect.c[2 + axis]);
+                    sum = oc_max(sum, child->rect.c[2 + axis] + 2 * child->style.borderSize);
                 }
             }
         }
-        f32 margin = box->style.layout.margin.c[axis];
-        box->rect.c[2 + axis] = sum + box->spacing[axis] + 2 * margin;
+        box->rect.c[2 + axis] = sum + box->spacing[axis] + 2 * box->style.layout.margin.c[axis];
     }
 }
 
@@ -2511,11 +2510,11 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a
         oc_ui_size* size = &child->style.size.c[axis];
         if(size->kind == OC_UI_SIZE_PARENT)
         {
-            child->rect.c[2 + axis] = oc_max(child->minSize[axis], availableSize * size->value);
+            child->rect.c[2 + axis] = oc_max(child->minSize[axis], availableSize * size->value) - 2 * child->style.borderSize;
         }
         else if(size->kind == OC_UI_SIZE_PARENT_MINUS_PIXELS)
         {
-            child->rect.c[2 + axis] = oc_max(child->minSize[axis], oc_max(0, availableSize - size->value));
+            child->rect.c[2 + axis] = oc_max(child->minSize[axis], oc_max(0, availableSize - size->value)) - 2 * child->style.borderSize;
         }
     }
 
@@ -2552,7 +2551,7 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a
                     if(!oc_ui_box_hidden(child)
                        && !child->style.floating.c[axis])
                     {
-                        sum += child->rect.c[2 + axis];
+                        sum += child->rect.c[2 + axis] + 2 * child->style.borderSize;
                         slack += oc_min(child->rect.c[2 + axis] * child->style.size.c[axis].relax,
                                         child->rect.c[2 + axis] - child->minSize[axis]);
                     }
@@ -2615,11 +2614,11 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a
         {
             if(box->style.layout.axis == axis)
             {
-                sum += child->rect.c[2 + axis];
+                sum += child->rect.c[2 + axis] + 2 * child->style.borderSize;
             }
             else
             {
-                sum = oc_max(sum, child->rect.c[2 + axis]);
+                sum = oc_max(sum, child->rect.c[2 + axis] + 2 * child->style.borderSize);
             }
         }
     }
@@ -2634,6 +2633,7 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a
               box->minSize[axis]);
 }
 
+/*
 void oc_ui_layout_upward_dependent_fixup(oc_ui_context* ui, oc_ui_box* box, int axis)
 {
     f32 margin = box->style.layout.margin.c[axis];
@@ -2710,6 +2710,7 @@ void oc_ui_layout_upward_dependent_fixup(oc_ui_context* ui, oc_ui_box* box, int
         oc_ui_layout_upward_dependent_fixup(ui, child, axis);
     }
 }
+*/
 
 void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)
 {
@@ -2718,8 +2719,8 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)
         return;
     }
 
-    box->rect.x = pos.x;
-    box->rect.y = pos.y;
+    box->rect.x = pos.x + box->style.borderSize;
+    box->rect.y = pos.y + box->style.borderSize;
     box->z = ui->z;
     ui->z++;
 
@@ -2729,12 +2730,16 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)
 
     oc_ui_align* align = box->style.layout.align.c;
 
-    oc_vec2 origin = { box->rect.x,
-                       box->rect.y };
+    oc_vec2 origin = {
+        box->rect.x,
+        box->rect.y,
+    };
     oc_vec2 currentPos = origin;
 
-    oc_vec2 margin = { box->style.layout.margin.x,
-                       box->style.layout.margin.y };
+    oc_vec2 margin = {
+        box->style.layout.margin.x,
+        box->style.layout.margin.y,
+    };
 
     currentPos.x += margin.x;
     currentPos.y += margin.y;
@@ -2759,7 +2764,7 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)
     {
         if(align[secondAxis] == OC_UI_ALIGN_CENTER)
         {
-            currentPos.c[secondAxis] = origin.c[secondAxis] + 0.5 * (box->rect.c[2 + secondAxis] - child->rect.c[2 + secondAxis]);
+            currentPos.c[secondAxis] = origin.c[secondAxis] + 0.5 * (box->rect.c[2 + secondAxis] - child->rect.c[2 + secondAxis] - 2 * child->style.borderSize);
         }
 
         oc_vec2 childPos = currentPos;
@@ -2785,7 +2790,7 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)
 
         if(!child->style.floating.c[layoutAxis])
         {
-            currentPos.c[layoutAxis] += child->rect.c[2 + layoutAxis] + spacing;
+            currentPos.c[layoutAxis] += child->rect.c[2 + layoutAxis] + 2 * child->style.borderSize + spacing;
         }
     }
     if(isnan(box->rect.w) || isnan(box->rect.h))
@@ -2895,10 +2900,10 @@ void oc_ui_draw_box(oc_ui_box* box)
     {
         oc_rect clipRect = oc_clip_top();
         oc_rect expRect = {
-            box->rect.x - 0.5 * style->borderSize,
-            box->rect.y - 0.5 * style->borderSize,
-            box->rect.w + style->borderSize,
-            box->rect.h + style->borderSize
+            box->rect.x - style->borderSize,
+            box->rect.y - style->borderSize,
+            box->rect.w + 2 * style->borderSize,
+            box->rect.h + 2 * style->borderSize
         };
 
         if((expRect.x + expRect.w < clipRect.x)
@@ -3009,7 +3014,16 @@ void oc_ui_draw_box(oc_ui_box* box)
     {
         oc_set_width(style->borderSize);
         oc_set_color(style->borderColor);
-        oc_ui_rectangle_stroke(box->rect, style->roundness);
+
+        oc_rect rect = {
+            box->rect.x - 0.5 * style->borderSize,
+            box->rect.y - 0.5 * style->borderSize,
+            box->rect.w + style->borderSize,
+            box->rect.h + style->borderSize,
+        };
+        f32 roundness = style->roundness ? style->roundness + style->borderSize : 0;
+
+        oc_ui_rectangle_stroke(rect, roundness);
     }
 }
 
diff --git a/src/ui/widgets.c b/src/ui/widgets.c
@@ -142,6 +142,7 @@ oc_ui_sig oc_ui_checkbox_str8(oc_str8 name, bool* checked)
         oc_ui_style_set_size(OC_UI_WIDTH, (oc_ui_size){ OC_UI_SIZE_PIXELS, 16 });
         oc_ui_style_set_size(OC_UI_HEIGHT, (oc_ui_size){ OC_UI_SIZE_PIXELS, 16 });
         oc_ui_style_set_var_str8(OC_UI_ROUNDNESS, OC_UI_THEME_ROUNDNESS_SMALL);
+        oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1.);
 
         if(*checked)
         {
@@ -160,7 +161,6 @@ oc_ui_sig oc_ui_checkbox_str8(oc_str8 name, bool* checked)
         else
         {
             oc_ui_style_set_var_str8(OC_UI_BORDER_COLOR, OC_UI_THEME_TEXT_3);
-            oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1.);
 
             oc_ui_style_rule(".hover")
             {
@@ -204,14 +204,16 @@ oc_ui_box* oc_ui_slider_str8(oc_str8 name, f32* value)
         oc_ui_style_set_size(OC_UI_WIDTH, (oc_ui_size){ OC_UI_SIZE_PIXELS, 100 });
         oc_ui_style_set_size(OC_UI_HEIGHT, (oc_ui_size){ OC_UI_SIZE_PIXELS, 24 });
 
-        //NOTE: don't clip thumb's borders
-        oc_ui_style_set_i32(OC_UI_OVERFLOW_X, OC_UI_OVERFLOW_ALLOW);
-        oc_ui_style_set_i32(OC_UI_OVERFLOW_Y, OC_UI_OVERFLOW_ALLOW);
-
         oc_rect frameRect = frame->rect;
         oc_ui_axis trackAxis = (frameRect.w > frameRect.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_style_set_i32(OC_UI_ALIGN_X + secondAxis, OC_UI_ALIGN_CENTER);
+
+        //NOTE: don't clip thumb border
+        oc_ui_style_set_i32(OC_UI_OVERFLOW_X, OC_UI_OVERFLOW_ALLOW);
+        oc_ui_style_set_i32(OC_UI_OVERFLOW_Y, OC_UI_OVERFLOW_ALLOW);
+
         f32 trackThickness = 4;
         f32 thumbSize = 24;
 
@@ -377,10 +379,6 @@ oc_ui_radio_group_info oc_ui_radio_group_str8(oc_str8 name, oc_ui_radio_group_in
         oc_ui_style_set_i32(OC_UI_AXIS, OC_UI_AXIS_Y);
         oc_ui_style_set_var_str8(OC_UI_SPACING, OC_UI_THEME_SPACING_REGULAR_TIGHT);
 
-        //NOTE: don't clip children borders
-        oc_ui_style_set_i32(OC_UI_OVERFLOW_X, OC_UI_OVERFLOW_ALLOW);
-        oc_ui_style_set_i32(OC_UI_OVERFLOW_Y, OC_UI_OVERFLOW_ALLOW);
-
         for(int i = 0; i < info->optionCount; i++)
         {
             oc_ui_box* row = oc_ui_box_str8(info->options[i])
@@ -392,21 +390,16 @@ oc_ui_radio_group_info oc_ui_radio_group_str8(oc_str8 name, oc_ui_radio_group_in
 
                 oc_ui_style_set_i32(OC_UI_AXIS, OC_UI_AXIS_X);
                 oc_ui_style_set_var_str8(OC_UI_SPACING, OC_UI_THEME_SPACING_TIGHT);
-                oc_ui_style_set_f32(OC_UI_MARGIN_X, 1);
-                oc_ui_style_set_f32(OC_UI_MARGIN_Y, 1);
                 oc_ui_style_set_i32(OC_UI_ALIGN_Y, OC_UI_ALIGN_CENTER);
 
-                //NOTE: don't clip children borders
-                oc_ui_style_set_i32(OC_UI_OVERFLOW_X, OC_UI_OVERFLOW_ALLOW);
-                oc_ui_style_set_i32(OC_UI_OVERFLOW_Y, OC_UI_OVERFLOW_ALLOW);
-
                 oc_ui_box* radio = oc_ui_box("radio")
                 {
                     oc_ui_box_set_draw_proc(radio, oc_ui_radio_indicator_draw, 0);
 
                     oc_ui_style_set_size(OC_UI_WIDTH, (oc_ui_size){ OC_UI_SIZE_PIXELS, 16 });
                     oc_ui_style_set_size(OC_UI_HEIGHT, (oc_ui_size){ OC_UI_SIZE_PIXELS, 16 });
                     oc_ui_style_set_f32(OC_UI_ROUNDNESS, 8);
+                    oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1);
 
                     oc_ui_style_set_i32(OC_UI_CLICK_THROUGH, 1);
 
@@ -436,7 +429,6 @@ oc_ui_radio_group_info oc_ui_radio_group_str8(oc_str8 name, oc_ui_radio_group_in
                     else
                     {
                         oc_ui_style_set_var_str8(OC_UI_BORDER_COLOR, OC_UI_THEME_TEXT_3);
-                        oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1);
 
                         if(oc_ui_box_hot(radio))
                         {
@@ -810,6 +802,7 @@ oc_ui_select_popup_info oc_ui_select_popup_str8(oc_str8 key, oc_ui_select_popup_
             oc_ui_style_set_f32(OC_UI_MARGIN_Y, 6);
             oc_ui_style_set_var_str8(OC_UI_BG_COLOR, OC_UI_THEME_FILL_0);
             oc_ui_style_set_var_str8(OC_UI_ROUNDNESS, OC_UI_THEME_ROUNDNESS_SMALL);
+            oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1);
 
             oc_ui_style_rule("button.hover")
             {
@@ -818,7 +811,6 @@ oc_ui_select_popup_info oc_ui_select_popup_str8(oc_str8 key, oc_ui_select_popup_
             oc_ui_style_rule("button.active")
             {
                 oc_ui_style_set_var_str8(OC_UI_BORDER_COLOR, OC_UI_THEME_PRIMARY);
-                oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1);
             }
             oc_ui_style_rule("button.hover.active")
             {
@@ -1812,6 +1804,7 @@ oc_ui_text_box_result oc_ui_text_box_str8(oc_str8 key, oc_arena* arena, oc_ui_te
         oc_ui_style_set_f32(OC_UI_MARGIN_Y, 6);
         oc_ui_style_set_var_str8(OC_UI_BG_COLOR, OC_UI_THEME_FILL_0);
         oc_ui_style_set_var_str8(OC_UI_ROUNDNESS, OC_UI_THEME_ROUNDNESS_SMALL);
+        oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1);
 
         oc_ui_style_set_var_str8(OC_UI_COLOR, OC_UI_THEME_TEXT_0);
         oc_ui_style_set_var_str8(OC_UI_TEXT_SIZE, OC_UI_THEME_TEXT_SIZE_REGULAR);
@@ -1825,7 +1818,6 @@ oc_ui_text_box_result oc_ui_text_box_str8(oc_str8 key, oc_arena* arena, oc_ui_te
         oc_ui_style_rule(".text-box.active")
         {
             oc_ui_style_set_var_str8(OC_UI_BORDER_COLOR, OC_UI_THEME_PRIMARY);
-            oc_ui_style_set_f32(OC_UI_BORDER_SIZE, 1);
         }
         oc_ui_style_rule(".text-box.dragging")
         {

Original file line number	Diff line number	Diff line change
`@@ -2435,11 +2435,11 @@ void oc_ui_layout_downward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int`
`2435`	`2435`	`if(box->style.layout.axis == axis)`
`2436`	`2436`	`{`
`2437`	`2437`	`count++;`
`2438`		`- minSum += child->minSize[axis];`
	`2438`	`+ minSum += child->minSize[axis] + 2 * child->style.borderSize;`
`2439`	`2439`	`}`
`2440`	`2440`	`else`
`2441`	`2441`	`{`
`2442`		`- minSum = oc_max(minSum, child->minSize[axis]);`
	`2442`	`+ minSum = oc_max(minSum, child->minSize[axis] + 2 * child->style.borderSize);`
`2443`	`2443`	`}`
`2444`	`2444`	`}`
`2445`	`2445`	`}`
`@@ -2480,7 +2480,7 @@ void oc_ui_layout_downward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int`
`2480`	`2480`	`{`
`2481`	`2481`	`if(oc_ui_layout_downward_dependency(child, axis))`
`2482`	`2482`	`{`
`2483`		`- sum += child->rect.c[2 + axis];`
	`2483`	`+ sum += child->rect.c[2 + axis] + 2 * child->style.borderSize;`
`2484`	`2484`	`}`
`2485`	`2485`	`}`
`2486`	`2486`	`}`
`@@ -2490,12 +2490,11 @@ void oc_ui_layout_downward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int`
`2490`	`2490`	`{`
`2491`	`2491`	`if(oc_ui_layout_downward_dependency(child, axis))`
`2492`	`2492`	`{`
`2493`		`- sum = oc_max(sum, child->rect.c[2 + axis]);`
	`2493`	`+ sum = oc_max(sum, child->rect.c[2 + axis] + 2 * child->style.borderSize);`
`2494`	`2494`	`}`
`2495`	`2495`	`}`
`2496`	`2496`	`}`
`2497`		`- f32 margin = box->style.layout.margin.c[axis];`
`2498`		`- box->rect.c[2 + axis] = sum + box->spacing[axis] + 2 * margin;`
	`2497`	`+ box->rect.c[2 + axis] = sum + box->spacing[axis] + 2 * box->style.layout.margin.c[axis];`
`2499`	`2498`	`}`
`2500`	`2499`	`}`
`2501`	`2500`
`@@ -2511,11 +2510,11 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a`
`2511`	`2510`	`oc_ui_size* size = &child->style.size.c[axis];`
`2512`	`2511`	`if(size->kind == OC_UI_SIZE_PARENT)`
`2513`	`2512`	`{`
`2514`		`- child->rect.c[2 + axis] = oc_max(child->minSize[axis], availableSize * size->value);`
	`2513`	`+ child->rect.c[2 + axis] = oc_max(child->minSize[axis], availableSize * size->value) - 2 * child->style.borderSize;`
`2515`	`2514`	`}`
`2516`	`2515`	`else if(size->kind == OC_UI_SIZE_PARENT_MINUS_PIXELS)`
`2517`	`2516`	`{`
`2518`		`- child->rect.c[2 + axis] = oc_max(child->minSize[axis], oc_max(0, availableSize - size->value));`
	`2517`	`+ child->rect.c[2 + axis] = oc_max(child->minSize[axis], oc_max(0, availableSize - size->value)) - 2 * child->style.borderSize;`
`2519`	`2518`	`}`
`2520`	`2519`	`}`
`2521`	`2520`
`@@ -2552,7 +2551,7 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a`
`2552`	`2551`	`if(!oc_ui_box_hidden(child)`
`2553`	`2552`	`&& !child->style.floating.c[axis])`
`2554`	`2553`	`{`
`2555`		`- sum += child->rect.c[2 + axis];`
	`2554`	`+ sum += child->rect.c[2 + axis] + 2 * child->style.borderSize;`
`2556`	`2555`	`slack += oc_min(child->rect.c[2 + axis] * child->style.size.c[axis].relax,`
`2557`	`2556`	`child->rect.c[2 + axis] - child->minSize[axis]);`
`2558`	`2557`	`}`
`@@ -2615,11 +2614,11 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a`
`2615`	`2614`	`{`
`2616`	`2615`	`if(box->style.layout.axis == axis)`
`2617`	`2616`	`{`
`2618`		`- sum += child->rect.c[2 + axis];`
	`2617`	`+ sum += child->rect.c[2 + axis] + 2 * child->style.borderSize;`
`2619`	`2618`	`}`
`2620`	`2619`	`else`
`2621`	`2620`	`{`
`2622`		`- sum = oc_max(sum, child->rect.c[2 + axis]);`
	`2621`	`+ sum = oc_max(sum, child->rect.c[2 + axis] + 2 * child->style.borderSize);`
`2623`	`2622`	`}`
`2624`	`2623`	`}`
`2625`	`2624`	`}`
`@@ -2634,6 +2633,7 @@ void oc_ui_layout_upward_dependent_size(oc_ui_context* ui, oc_ui_box* box, int a`
`2634`	`2633`	`box->minSize[axis]);`
`2635`	`2634`	`}`
`2636`	`2635`
	`2636`	`+/*`
`2637`	`2637`	`void oc_ui_layout_upward_dependent_fixup(oc_ui_context* ui, oc_ui_box* box, int axis)`
`2638`	`2638`	`{`
`2639`	`2639`	`f32 margin = box->style.layout.margin.c[axis];`
`@@ -2710,6 +2710,7 @@ void oc_ui_layout_upward_dependent_fixup(oc_ui_context* ui, oc_ui_box* box, int`
`2710`	`2710`	`oc_ui_layout_upward_dependent_fixup(ui, child, axis);`
`2711`	`2711`	`}`
`2712`	`2712`	`}`
	`2713`	`+*/`
`2713`	`2714`
`2714`	`2715`	`void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)`
`2715`	`2716`	`{`
`@@ -2718,8 +2719,8 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)`
`2718`	`2719`	`return;`
`2719`	`2720`	`}`
`2720`	`2721`
`2721`		`- box->rect.x = pos.x;`
`2722`		`- box->rect.y = pos.y;`
	`2722`	`+ box->rect.x = pos.x + box->style.borderSize;`
	`2723`	`+ box->rect.y = pos.y + box->style.borderSize;`
`2723`	`2724`	`box->z = ui->z;`
`2724`	`2725`	`ui->z++;`
`2725`	`2726`
`@@ -2729,12 +2730,16 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)`
`2729`	`2730`
`2730`	`2731`	`oc_ui_align* align = box->style.layout.align.c;`
`2731`	`2732`
`2732`		`- oc_vec2 origin = { box->rect.x,`
`2733`		`- box->rect.y };`
	`2733`	`+ oc_vec2 origin = {`
	`2734`	`+ box->rect.x,`
	`2735`	`+ box->rect.y,`
	`2736`	`+ };`
`2734`	`2737`	`oc_vec2 currentPos = origin;`
`2735`	`2738`
`2736`		`- oc_vec2 margin = { box->style.layout.margin.x,`
`2737`		`- box->style.layout.margin.y };`
	`2739`	`+ oc_vec2 margin = {`
	`2740`	`+ box->style.layout.margin.x,`
	`2741`	`+ box->style.layout.margin.y,`
	`2742`	`+ };`
`2738`	`2743`
`2739`	`2744`	`currentPos.x += margin.x;`
`2740`	`2745`	`currentPos.y += margin.y;`
`@@ -2759,7 +2764,7 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)`
`2759`	`2764`	`{`
`2760`	`2765`	`if(align[secondAxis] == OC_UI_ALIGN_CENTER)`
`2761`	`2766`	`{`
`2762`		`- currentPos.c[secondAxis] = origin.c[secondAxis] + 0.5 * (box->rect.c[2 + secondAxis] - child->rect.c[2 + secondAxis]);`
	`2767`	`+ currentPos.c[secondAxis] = origin.c[secondAxis] + 0.5 * (box->rect.c[2 + secondAxis] - child->rect.c[2 + secondAxis] - 2 * child->style.borderSize);`
`2763`	`2768`	`}`
`2764`	`2769`
`2765`	`2770`	`oc_vec2 childPos = currentPos;`
`@@ -2785,7 +2790,7 @@ void oc_ui_layout_compute_rect(oc_ui_context* ui, oc_ui_box* box, oc_vec2 pos)`
`2785`	`2790`
`2786`	`2791`	`if(!child->style.floating.c[layoutAxis])`
`2787`	`2792`	`{`
`2788`		`- currentPos.c[layoutAxis] += child->rect.c[2 + layoutAxis] + spacing;`
	`2793`	`+ currentPos.c[layoutAxis] += child->rect.c[2 + layoutAxis] + 2 * child->style.borderSize + spacing;`
`2789`	`2794`	`}`
`2790`	`2795`	`}`
`2791`	`2796`	`if(isnan(box->rect.w) \|\| isnan(box->rect.h))`
`@@ -2895,10 +2900,10 @@ void oc_ui_draw_box(oc_ui_box* box)`
`2895`	`2900`	`{`
`2896`	`2901`	`oc_rect clipRect = oc_clip_top();`
`2897`	`2902`	`oc_rect expRect = {`
`2898`		`- box->rect.x - 0.5 * style->borderSize,`
`2899`		`- box->rect.y - 0.5 * style->borderSize,`
`2900`		`- box->rect.w + style->borderSize,`
`2901`		`- box->rect.h + style->borderSize`
	`2903`	`+ box->rect.x - style->borderSize,`
	`2904`	`+ box->rect.y - style->borderSize,`
	`2905`	`+ box->rect.w + 2 * style->borderSize,`
	`2906`	`+ box->rect.h + 2 * style->borderSize`
`2902`	`2907`	`};`
`2903`	`2908`
`2904`	`2909`	`if((expRect.x + expRect.w < clipRect.x)`
`@@ -3009,7 +3014,16 @@ void oc_ui_draw_box(oc_ui_box* box)`
`3009`	`3014`	`{`
`3010`	`3015`	`oc_set_width(style->borderSize);`
`3011`	`3016`	`oc_set_color(style->borderColor);`
`3012`		`- oc_ui_rectangle_stroke(box->rect, style->roundness);`
	`3017`	`+`
	`3018`	`+ oc_rect rect = {`
	`3019`	`+ box->rect.x - 0.5 * style->borderSize,`
	`3020`	`+ box->rect.y - 0.5 * style->borderSize,`
	`3021`	`+ box->rect.w + style->borderSize,`
	`3022`	`+ box->rect.h + style->borderSize,`
	`3023`	`+ };`
	`3024`	`+ f32 roundness = style->roundness ? style->roundness + style->borderSize : 0;`
	`3025`	`+`
	`3026`	`+ oc_ui_rectangle_stroke(rect, roundness);`
`3013`	`3027`	`}`
`3014`	`3028`	`}`
`3015`	`3029`