diff --git a/Basalt/objects/Flexbox.lua b/Basalt/objects/Flexbox.lua index fc1077f..b02159b 100644 --- a/Basalt/objects/Flexbox.lua +++ b/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 \ No newline at end of file +end diff --git a/docs/objects/Flexbox.md b/docs/objects/Flexbox.md index 98e02c3..ca9770d 100644 --- a/docs/objects/Flexbox.md +++ b/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 - + ``` diff --git a/docs/objects/Flexbox/setAlignItems.md b/docs/objects/Flexbox/setAlignItems.md new file mode 100644 index 0000000..454a674 --- /dev/null +++ b/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") +```