fix vertical flex and padding

lib/simple_ui/flex.lua

@@ -43,11 +43,11 @@ function flex:layout()
         for _, child in ipairs(self.children) do
             child.constraints = Constraints { maxWidth = self.constraints.maxWidth }
             child:layout()
-            child.offset = Vec3 { self.offset.x, self.offset.y + mainAxisSize }
             if child.size.x > crossAxisSize then crossAxisSize = child.size.x end
             mainAxisSize = mainAxisSize + child.size.y
         end
 
+
         local start = 0
         if self.mainAxisAlignment == "center" then
             start = self.constraints.maxHeight / 2 - mainAxisSize / 2
@@ -63,7 +63,7 @@ function flex:layout()
         if self.mainAxisSize == "max" then
             self.size = Vec3 { crossAxisSize, self.constraints.maxHeight }
         else
-            self.size = Vec3 { mainAxisSize, crossAxisSize }
+            self.size = Vec3 { crossAxisSize, mainAxisSize }
         end
     end
 end

lib/simple_ui/level/test.lua

@@ -17,24 +17,32 @@ function MyWidget:build()
     return Flex:new {
         key = "my_flex",
         direction = "vertical",
+        mainAxisSize = "max",
         children = {
-            Flex:new {
-                key = "inner_flex",
-                mainAxisAlignment = "start",
-                children = {
-                    SizedBox:new {
-                        width = 100,
-                        height = 100,
-                        child = Placeholder:new {}
+            Padding:new {
+                top = 8,
+                child = Flex:new {
+                    key = "inner_flex",
+                    mainAxisAlignment = "start",
+                    mainAxisSize = "min",
+                    children = {
+                        SizedBox:new {
+                            width = 100,
+                            height = 100,
+                            child = Placeholder:new {}
+                        },
+                        SizedBox:new {
+                            width = 150,
+                            height = 200,
+                            child = Placeholder:new {}
+                        },
+                        SizedBox:new {
+                            width = 100,
+                            height = 100,
+                            child = Placeholder:new {}
+                        },
                     },
-
-                    SizedBox:new {
-                        width = 100,
-                        height = 100,
-                        child = Placeholder:new {}
-                    },
-                },
-
+                }
             },
             Flex:new {
                 key = "inner_flex2",
@@ -54,36 +62,6 @@ function MyWidget:build()
                 },
 
             },
-            Flex:new {
-                key = "inner_flex3",
-                mainAxisAlignment = "end",
-                children = {
-                    SizedBox:new {
-                        width = 100,
-                        height = 100,
-                        child = Placeholder:new {}
-                    },
-
-                    SizedBox:new {
-                        width = 100,
-                        height = 100,
-                        child = Placeholder:new {}
-                    },
-                },
-
-            },
-
-            -- SizedBox:new {
-            --     width = 100,
-            --     height = 100,
-            --     child = Placeholder:new {}
-            -- },
-
-            -- SizedBox:new {
-            --     width = 100,
-            --     height = 100,
-            --     child = Placeholder:new {}
-            -- },
         }
     }
 end

lib/simple_ui/multi_child_element.lua

@@ -14,6 +14,16 @@ function element:draw()
     for _, child in ipairs(self.children) do
         child:draw()
     end
+
+    --- @TODO: сделать дебажный метод для отрисовки границ
+    love.graphics.setColor(1, 0, 0)
+    love.graphics.line(self.offset.x, self.offset.y, self.offset.x + self.size.x, self.offset.y)
+    love.graphics.line(self.offset.x, self.offset.y, self.offset.x, self.offset.y + self.size.y)
+    love.graphics.line(self.offset.x + self.size.x, self.offset.y, self.offset.x + self.size.x,
+        self.offset.y + self.size.y)
+    love.graphics.line(self.offset.x, self.offset.y + self.size.y, self.offset.x + self.size.x,
+        self.offset.y + self.size.y)
+    love.graphics.setColor(1, 1, 1)
 end
 
 return element

lib/simple_ui/padding.lua

@@ -8,7 +8,7 @@ local SingleChildElement = require "lib.simple_ui.single_child_element"
 --- @field bottom number
 local element = setmetatable({}, SingleChildElement)
 element.__index = element
-element.type = "Placeholder"
+element.type = "Padding"
 element.left = 0
 element.right = 0
 element.top = 0
@@ -28,7 +28,7 @@ function element:layout()
     self.child.constraints = c
 
     self.child:layout()
-    self.size = Vec3 { self.child.size.x + self.left + self.right, self.constraints.maxHeight + self.top + self.bottom }
+    self.size = Vec3 { self.child.size.x + self.left + self.right, self.child.size.y + self.top + self.bottom }
     self.child.offset = self.offset + Vec3 { self.left, self.top }
 end