Merge pull request #66 from thesabinelim/patch-6

Fix Flexbox offset, add alignItems attribute

Basalt/objects/Flexbox.lua

@@ -2,45 +2,56 @@ return function(name, basalt)
     local base = basalt.getObject("Frame")(name, basalt)
     local objectType = "Flexbox"
 
-    local flexDirection = "row" -- "row" oder "column"
+    local flexDirection = "row" -- "row" or "column"
     local justifyContent = "flex-start" -- "flex-start", "flex-end", "center", "space-between", "space-around"
+    local alignItems = "flex-start" -- "flex-start", "flex-end", "center", "space-between", "space-around"
     local spacing = 1
 
+    local function getObjectOffAxisOffset(self, obj)
+        local width, height = self:getSize()
+        local objWidth, objHeight = obj.element:getSize()
+        local availableSpace = flexDirection == "row" and height - objHeight or width - objWidth
+        local offset = 1
+        if alignItems == "center" then
+            offset = 1 + availableSpace / 2
+        elseif alignItems == "flex-end" then
+            offset = 1 + availableSpace
+        end
+        return offset
+    end
+
     local function applyLayout(self)
         local objects = self:getObjects()
         local totalElements = #objects
-        local _, _ = self:getPosition()
         local width, height = self:getSize()
     
-        local totalChildSize = 0
+        local mainAxisTotalChildSize = 0
         for _, obj in ipairs(objects) do
+            local objWidth, objHeight = obj.element:getSize()
             if flexDirection == "row" then
-                local objWidth, _ = obj.element:getSize()
-                totalChildSize = totalChildSize + objWidth
+                mainAxisTotalChildSize = mainAxisTotalChildSize + objWidth
             else
-                local _, objHeight = obj.element:getSize()
-                totalChildSize = totalChildSize + objHeight
+                mainAxisTotalChildSize = mainAxisTotalChildSize + objHeight
             end
         end
-    
-        local availableSpace = (flexDirection == "row" and width or height) - totalChildSize - (spacing * (totalElements - 1))
-    
-        local currentOffset = 0
+        local mainAxisAvailableSpace = (flexDirection == "row" and width or height) - mainAxisTotalChildSize - (spacing * (totalElements - 1))
+        local justifyContentOffset = 1
         if justifyContent == "center" then
-            currentOffset = availableSpace / 2
+            justifyContentOffset = 1 + mainAxisAvailableSpace / 2
         elseif justifyContent == "flex-end" then
-            currentOffset = availableSpace
+            justifyContentOffset = 1 + mainAxisvailableSpace
         end
     
         for _, obj in ipairs(objects) do
+            local alignItemsOffset = getObjectOffAxisOffset(self, obj)
             if flexDirection == "row" then
-                obj.element:setPosition(currentOffset, 1) -- Ändere den y-Wert auf 1
+                obj.element:setPosition(justifyContentOffset, alignItemsOffset)
                 local objWidth, _ = obj.element:getSize()
-                currentOffset = currentOffset + objWidth + spacing
+                justifyContentOffset = justifyContentOffset + objWidth + spacing
             else
-                obj.element:setPosition(1, math.floor(currentOffset+0.5)) -- Ändere den x-Wert auf 1
+                obj.element:setPosition(alignItemsOffset, math.floor(justifyContentOffset+0.5))
                 local _, objHeight = obj.element:getSize()
-                currentOffset = currentOffset + objHeight + spacing
+                justifyContentOffset = justifyContentOffset + objHeight + spacing
             end
         end
     end
@@ -80,6 +91,14 @@ return function(name, basalt)
             end
             return self
         end,
+
+        setAlignItems = function(self, alignment)
+            if alignment == "flex-start" or alignment == "flex-end" or alignment == "center" or alignment == "space-between" or alignment == "space-around" then
+                alignItems = alignment
+                applyLayout(self)
+            end
+            return self
+        end,
     }
 
     for k,v in pairs(basalt.getObjects())do
@@ -92,4 +111,4 @@ return function(name, basalt)
 
     object.__index = object
     return setmetatable(object, base)
-end
+end

docs/objects/Flexbox.md

@@ -8,6 +8,7 @@ In addition to the methods inherited from Frame, Container, VisualObject and Obj
 |[getSpacing](objects/Flexbox/getSpacing.md)|Returns the space between objects
 |[setFlexDirection](objects/Flexbox/setFlexDirection.md)|Sets the direction in which the children will be placed
 |[setJustifyContent](objects/Flexbox/setJustifyContent.md)|Determines how the children are aligned along the main axis
+|[setAlignItems](objects/Flexbox/setAlignItems.md)|Determines how the children are aligned along the off axis
 
 ### Example
 
@@ -18,11 +19,12 @@ local main = basalt.createFrame()
 local flexbox = main:addFlexbox()
   :setFlexDirection("column")
   :setJustifyContent("space-between")
+  :setAlignItems("center")
   :setSpacing(5)
 ```
 
 Alternatively, you can create a flexbox using an XML layout:
 
 ```xml
-<flexbox flexDirection="column" justifyContent="space-between" spacing="5">
+<flexbox flexDirection="column" justifyContent="space-between" alignItems="center" spacing="5">
 ```

docs/objects/Flexbox/setAlignItems.md

@@ -0,0 +1,23 @@
+## setJustifyContent
+
+### Description
+
+Determines how the children are aligned along the off axis
+
+### Parameters
+
+1. `string` One of ("flex-start", "flex-end", "center", "space-between", "space-around") - default is flex-start. Works the same as the property of the same name in [CSS flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties)
+
+### Returns
+
+1. `object` The object in use
+
+### Usage
+
+* Creates a default flexbox and sets the align items to space-between.
+
+```lua
+local main = basalt.createFrame()
+local flexbox = mainFrame:addFlexbox()
+      :setAlignItems("space-between")
+```