From 6cd8e0ebb0344bc43c4914faecfb7dcb186d2da9 Mon Sep 17 00:00:00 2001 From: Sabine Lim Date: Mon, 8 May 2023 17:47:44 +1000 Subject: [PATCH 1/3] Fix Flexbox offset Was off by one, leading to the outer pixel getting cut off at the boundary --- Basalt/objects/Flexbox.lua | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Basalt/objects/Flexbox.lua b/Basalt/objects/Flexbox.lua index fc1077f..46d5418 100644 --- a/Basalt/objects/Flexbox.lua +++ b/Basalt/objects/Flexbox.lua @@ -25,11 +25,11 @@ return function(name, basalt) local availableSpace = (flexDirection == "row" and width or height) - totalChildSize - (spacing * (totalElements - 1)) - local currentOffset = 0 + local currentOffset = 1 if justifyContent == "center" then - currentOffset = availableSpace / 2 + currentOffset = 1 + availableSpace / 2 elseif justifyContent == "flex-end" then - currentOffset = availableSpace + currentOffset = 1 + availableSpace end for _, obj in ipairs(objects) do @@ -92,4 +92,4 @@ return function(name, basalt) object.__index = object return setmetatable(object, base) -end \ No newline at end of file +end From 3de3fbecb36f4c876368b6d8644b5abc5a5eeb77 Mon Sep 17 00:00:00 2001 From: Sabine Lim Date: Mon, 8 May 2023 18:53:59 +1000 Subject: [PATCH 2/3] Add align items --- Basalt/objects/Flexbox.lua | 53 ++++++++++++++++++++++++++------------ Basalt/plugins/xml.lua | 1 + 2 files changed, 37 insertions(+), 17 deletions(-) diff --git a/Basalt/objects/Flexbox.lua b/Basalt/objects/Flexbox.lua index 46d5418..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 = 1 + local mainAxisAvailableSpace = (flexDirection == "row" and width or height) - mainAxisTotalChildSize - (spacing * (totalElements - 1)) + local justifyContentOffset = 1 if justifyContent == "center" then - currentOffset = 1 + availableSpace / 2 + justifyContentOffset = 1 + mainAxisAvailableSpace / 2 elseif justifyContent == "flex-end" then - currentOffset = 1 + 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 diff --git a/Basalt/plugins/xml.lua b/Basalt/plugins/xml.lua index e893aef..8074032 100644 --- a/Basalt/plugins/xml.lua +++ b/Basalt/plugins/xml.lua @@ -375,6 +375,7 @@ return { base.setValuesByXMLData(self, data, scripts) if(xmlValue("flexDirection", data)~=nil)then self:setFlexDirection(xmlValue("flexDirection", data)) end if(xmlValue("justifyContent", data)~=nil)then self:setJustifyContent(xmlValue("justifyContent", data)) end + if(xmlValue("alignItems", data)~=nil)then self:setAlignItems(xmlValue("alignItems", data)) end if(xmlValue("spacing", data)~=nil)then self:setSpacing(xmlValue("spacing", data)) end return self end, From 166a234bd2e0c3ac7d03d7caaa068f791077d3b9 Mon Sep 17 00:00:00 2001 From: Sabine Lim Date: Mon, 8 May 2023 18:56:12 +1000 Subject: [PATCH 3/3] Add docs --- docs/objects/Flexbox.md | 4 +++- docs/objects/Flexbox/setAlignItems.md | 23 +++++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 docs/objects/Flexbox/setAlignItems.md 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") +```