logical fixes
This commit is contained in:
Michael Freno
180
FlexLove.lua
180
FlexLove.lua
@@ -596,102 +596,102 @@ function Element:layoutChildren()
|
|||||||
goto continue
|
goto continue
|
||||||
end
|
end
|
||||||
|
|
||||||
if self.flexDirection == FlexDirection.VERTICAL then
|
if self.flexDirection == FlexDirection.VERTICAL then
|
||||||
-- Position relative to parent origin
|
-- Position relative to parent origin along Y-axis (main axis)
|
||||||
child.x = self.x + (self.margin.left or 0)
|
child.x = self.x + (self.margin.left or 0)
|
||||||
child.y = self.y + currentPos
|
child.y = self.y + currentPos
|
||||||
|
|
||||||
-- Apply alignment to vertical axis (alignItems)
|
-- Apply alignment to cross axis (X-axis for vertical flex direction)
|
||||||
if self.alignItems == AlignItems.FLEX_START then
|
if self.alignItems == AlignItems.FLEX_START then
|
||||||
-- nothing
|
-- nothing
|
||||||
elseif self.alignItems == AlignItems.CENTER then
|
elseif self.alignItems == AlignItems.CENTER then
|
||||||
child.x = self.x + (self.width - (child.width or 0)) / 2
|
child.x = self.x + (self.width - (child.width or 0)) / 2
|
||||||
elseif self.alignItems == AlignItems.FLEX_END then
|
elseif self.alignItems == AlignItems.FLEX_END then
|
||||||
child.x = self.x + self.width - (child.width or 0)
|
child.x = self.x + self.width - (child.width or 0)
|
||||||
elseif self.alignItems == AlignItems.STRETCH then
|
elseif self.alignItems == AlignItems.STRETCH then
|
||||||
child.width = self.width
|
child.width = self.width
|
||||||
end
|
end
|
||||||
|
|
||||||
-- Apply self alignment to cross axis (alignSelf)
|
-- Apply self alignment to cross axis (alignSelf)
|
||||||
local effectiveAlignSelf = child.alignSelf
|
local effectiveAlignSelf = child.alignSelf
|
||||||
if child.alignSelf == AlignSelf.AUTO then
|
if child.alignSelf == AlignSelf.AUTO then
|
||||||
effectiveAlignSelf = self.alignItems
|
effectiveAlignSelf = self.alignItems
|
||||||
end
|
end
|
||||||
|
|
||||||
if effectiveAlignSelf == AlignSelf.FLEX_START then
|
if effectiveAlignSelf == AlignSelf.FLEX_START then
|
||||||
-- Position at the start of cross axis relative to parent
|
-- Position at the start of cross axis relative to parent
|
||||||
child.x = self.x + (self.margin.left or 0)
|
child.x = self.x + (self.margin.left or 0)
|
||||||
elseif effectiveAlignSelf == AlignSelf.CENTER then
|
elseif effectiveAlignSelf == AlignSelf.CENTER then
|
||||||
if self.flexDirection == FlexDirection.VERTICAL then
|
if self.flexDirection == FlexDirection.VERTICAL then
|
||||||
child.x = self.x + (self.width - (child.width or 0)) / 2
|
child.x = self.x + (self.width - (child.width or 0)) / 2
|
||||||
else
|
else
|
||||||
child.y = self.y + (self.height - (child.height or 0)) / 2
|
child.y = self.y + (self.height - (child.height or 0)) / 2
|
||||||
end
|
end
|
||||||
elseif effectiveAlignSelf == AlignSelf.FLEX_END then
|
elseif effectiveAlignSelf == AlignSelf.FLEX_END then
|
||||||
if self.flexDirection == FlexDirection.VERTICAL then
|
if self.flexDirection == FlexDirection.VERTICAL then
|
||||||
child.x = self.x + self.width - (child.width or 0)
|
child.x = self.x + self.width - (child.width or 0)
|
||||||
else
|
else
|
||||||
child.y = self.y + self.height - (child.height or 0)
|
child.y = self.y + self.height - (child.height or 0)
|
||||||
end
|
end
|
||||||
elseif effectiveAlignSelf == AlignSelf.STRETCH then
|
elseif effectiveAlignSelf == AlignSelf.STRETCH then
|
||||||
if self.flexDirection == FlexDirection.VERTICAL then
|
if self.flexDirection == FlexDirection.VERTICAL then
|
||||||
-- Only set width if not already stretched by alignItems
|
-- Only set width if not already stretched by alignItems
|
||||||
if child.width ~= self.width then
|
if child.width ~= self.width then
|
||||||
child.width = self.width
|
child.width = self.width
|
||||||
end
|
end
|
||||||
else
|
else
|
||||||
-- Only set height if not already stretched by alignItems
|
-- Only set height if not already stretched by alignItems
|
||||||
if child.height ~= self.height then
|
if child.height ~= self.height then
|
||||||
child.height = self.height
|
child.height = self.height
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
-- Apply justifySelf alignment to main axis (for vertical flexDirection, this is y-axis)
|
-- Apply justifySelf alignment to main axis (for vertical flexDirection, this is y-axis)
|
||||||
local effectiveJustifySelf = child.justifySelf
|
local effectiveJustifySelf = child.justifySelf
|
||||||
if child.justifySelf == JustifySelf.AUTO then
|
if child.justifySelf == JustifySelf.AUTO then
|
||||||
effectiveJustifySelf = self.justifyContent
|
effectiveJustifySelf = self.justifyContent
|
||||||
end
|
end
|
||||||
|
|
||||||
if effectiveJustifySelf == JustifySelf.FLEX_START then
|
if effectiveJustifySelf == JustifySelf.FLEX_START then
|
||||||
-- Keep the current Y position (already set by spacing logic)
|
-- Keep the current Y position (already set by spacing logic)
|
||||||
elseif effectiveJustifySelf == JustifySelf.CENTER then
|
elseif effectiveJustifySelf == JustifySelf.CENTER then
|
||||||
-- Center along the main axis (y-axis for vertical flex direction)
|
-- Center along the main axis (y-axis for vertical flex direction)
|
||||||
local childHeight = child.height or 0
|
local childHeight = child.height or 0
|
||||||
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
|
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
|
||||||
local totalChildHeight = 0
|
local totalChildHeight = 0
|
||||||
for _, c in ipairs(self.children) do
|
for _, c in ipairs(self.children) do
|
||||||
if c.positioning ~= Positioning.ABSOLUTE then
|
if c.positioning ~= Positioning.ABSOLUTE then
|
||||||
totalChildHeight = totalChildHeight + (c.height or 0)
|
totalChildHeight = totalChildHeight + (c.height or 0)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
|
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
|
||||||
if freeSpace > 0 then
|
if freeSpace > 0 then
|
||||||
child.y = self.y + (self.margin.top or 0) + freeSpace / 2
|
child.y = self.y + (self.margin.top or 0) + freeSpace / 2
|
||||||
end
|
end
|
||||||
elseif effectiveJustifySelf == JustifySelf.FLEX_END then
|
elseif effectiveJustifySelf == JustifySelf.FLEX_END then
|
||||||
-- Position at the end of main axis (y-axis for vertical flex direction)
|
-- Position at the end of main axis (y-axis for vertical flex direction)
|
||||||
local childHeight = child.height or 0
|
local childHeight = child.height or 0
|
||||||
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
|
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
|
||||||
local totalChildHeight = 0
|
local totalChildHeight = 0
|
||||||
for _, c in ipairs(self.children) do
|
for _, c in ipairs(self.children) do
|
||||||
if c.positioning ~= Positioning.ABSOLUTE then
|
if c.positioning ~= Positioning.ABSOLUTE then
|
||||||
totalChildHeight = totalChildHeight + (c.height or 0)
|
totalChildHeight = totalChildHeight + (c.height or 0)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
|
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
|
||||||
if freeSpace > 0 then
|
if freeSpace > 0 then
|
||||||
child.y = self.y + (self.margin.top or 0) + freeSpace
|
child.y = self.y + (self.margin.top or 0) + freeSpace
|
||||||
end
|
end
|
||||||
elseif effectiveJustifySelf == JustifySelf.SPACE_AROUND then
|
elseif effectiveJustifySelf == JustifySelf.SPACE_AROUND then
|
||||||
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
|
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
|
||||||
elseif effectiveJustifySelf == JustifySelf.SPACE_EVENLY then
|
elseif effectiveJustifySelf == JustifySelf.SPACE_EVENLY then
|
||||||
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
|
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
|
||||||
elseif effectiveJustifySelf == JustifySelf.SPACE_BETWEEN then
|
elseif effectiveJustifySelf == JustifySelf.SPACE_BETWEEN then
|
||||||
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
|
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
|
||||||
end
|
end
|
||||||
|
|
||||||
currentPos = currentPos + (child.height or 0) + self.gap + (self.margin.top or 0) + (self.margin.bottom or 0)
|
currentPos = currentPos + (child.height or 0) + self.gap
|
||||||
else
|
else
|
||||||
-- Horizontal layout: position relative to parent origin
|
-- Horizontal layout: position relative to parent origin
|
||||||
child.x = self.x + currentPos + (self.margin.left or 0)
|
child.x = self.x + currentPos + (self.margin.left or 0)
|
||||||
|
|||||||
@@ -132,8 +132,8 @@ function TestJustifyContent:testFlexEndJustifyContent()
|
|||||||
|
|
||||||
-- With flex-end, children should be positioned at the end of the container
|
-- With flex-end, children should be positioned at the end of the container
|
||||||
-- CSS behavior: children positioned at the end (rightmost for horizontal, bottommost for vertical)
|
-- CSS behavior: children positioned at the end (rightmost for horizontal, bottommost for vertical)
|
||||||
local totalWidth = child1.w + child2.w + window.gap -- child1.width + child2.width + gap
|
local totalWidth = child1.width + child2.width + window.gap -- child1.width + child2.width + gap
|
||||||
local containerWidth = window.w
|
local containerWidth = window.width
|
||||||
local expectedPosition = containerWidth - totalWidth
|
local expectedPosition = containerWidth - totalWidth
|
||||||
|
|
||||||
luaunit.assertAlmostEquals(child1.x, expectedPosition)
|
luaunit.assertAlmostEquals(child1.x, expectedPosition)
|
||||||
|
|||||||
Reference in New Issue
Block a user