Fix Flexbox offset, add alignItems attribute #66
@@ -2,45 +2,56 @@ return function(name, basalt)
|
|||||||
local base = basalt.getObject("Frame")(name, basalt)
|
local base = basalt.getObject("Frame")(name, basalt)
|
||||||
local objectType = "Flexbox"
|
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 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 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 function applyLayout(self)
|
||||||
local objects = self:getObjects()
|
local objects = self:getObjects()
|
||||||
local totalElements = #objects
|
local totalElements = #objects
|
||||||
local _, _ = self:getPosition()
|
|
||||||
local width, height = self:getSize()
|
local width, height = self:getSize()
|
||||||
|
|
||||||
local totalChildSize = 0
|
local mainAxisTotalChildSize = 0
|
||||||
for _, obj in ipairs(objects) do
|
for _, obj in ipairs(objects) do
|
||||||
|
local objWidth, objHeight = obj.element:getSize()
|
||||||
if flexDirection == "row" then
|
if flexDirection == "row" then
|
||||||
local objWidth, _ = obj.element:getSize()
|
mainAxisTotalChildSize = mainAxisTotalChildSize + objWidth
|
||||||
totalChildSize = totalChildSize + objWidth
|
|
||||||
else
|
else
|
||||||
local _, objHeight = obj.element:getSize()
|
mainAxisTotalChildSize = mainAxisTotalChildSize + objHeight
|
||||||
totalChildSize = totalChildSize + objHeight
|
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
local mainAxisAvailableSpace = (flexDirection == "row" and width or height) - mainAxisTotalChildSize - (spacing * (totalElements - 1))
|
||||||
local availableSpace = (flexDirection == "row" and width or height) - totalChildSize - (spacing * (totalElements - 1))
|
local justifyContentOffset = 1
|
||||||
|
|
||||||
local currentOffset = 1
|
|
||||||
if justifyContent == "center" then
|
if justifyContent == "center" then
|
||||||
currentOffset = 1 + availableSpace / 2
|
justifyContentOffset = 1 + mainAxisAvailableSpace / 2
|
||||||
elseif justifyContent == "flex-end" then
|
elseif justifyContent == "flex-end" then
|
||||||
currentOffset = 1 + availableSpace
|
justifyContentOffset = 1 + mainAxisvailableSpace
|
||||||
end
|
end
|
||||||
|
|
||||||
for _, obj in ipairs(objects) do
|
for _, obj in ipairs(objects) do
|
||||||
|
local alignItemsOffset = getObjectOffAxisOffset(self, obj)
|
||||||
if flexDirection == "row" then
|
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()
|
local objWidth, _ = obj.element:getSize()
|
||||||
currentOffset = currentOffset + objWidth + spacing
|
justifyContentOffset = justifyContentOffset + objWidth + spacing
|
||||||
else
|
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()
|
local _, objHeight = obj.element:getSize()
|
||||||
currentOffset = currentOffset + objHeight + spacing
|
justifyContentOffset = justifyContentOffset + objHeight + spacing
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
@@ -80,6 +91,14 @@ return function(name, basalt)
|
|||||||
end
|
end
|
||||||
return self
|
return self
|
||||||
end,
|
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
|
for k,v in pairs(basalt.getObjects())do
|
||||||
|
|||||||
@@ -375,6 +375,7 @@ return {
|
|||||||
base.setValuesByXMLData(self, data, scripts)
|
base.setValuesByXMLData(self, data, scripts)
|
||||||
if(xmlValue("flexDirection", data)~=nil)then self:setFlexDirection(xmlValue("flexDirection", data)) end
|
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("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
|
if(xmlValue("spacing", data)~=nil)then self:setSpacing(xmlValue("spacing", data)) end
|
||||||
return self
|
return self
|
||||||
end,
|
end,
|
||||||
|
|||||||
Reference in New Issue
Block a user