Mike/FlexLove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update margin/padding

Browse Source
This commit is contained in:
Mike Freno
2025-09-16 09:45:52 -04:00
parent 859d72fdb4
commit 8e5729d8a6
1 changed files with 148 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
FlexLove.lua
View File

@@ -359,10 +359,8 @@ end
---@field textColor Color -- Color of the text content ---@field textColor Color -- Color of the text content
---@field textAlign TextAlign -- Alignment of the text content ---@field textAlign TextAlign -- Alignment of the text content
---@field gap number -- Space between children elements (default: 10) ---@field gap number -- Space between children elements (default: 10)
---@field px number -- Horizontal padding around children (default: 0) ---@field padding {top?:number, right?:number, bottom?:number, left?:number} -- Padding around children (default: {top=0, right=0, bottom=0, left=0})
---@field py number -- Vertical padding around children (default: 0) ---@field margin {top?:number, right?:number, bottom?:number, left?:number} -- Margin around children (default: {top=0, right=0, bottom=0, left=0})
---@field mx number -- Horizontal margin around children (default: 0)
---@field my number -- Vertical margin around children (default: 0)
---@field positioning Positioning -- Layout positioning mode (default: ABSOLUTE) ---@field positioning Positioning -- Layout positioning mode (default: ABSOLUTE)
---@field flexDirection FlexDirection -- Direction of flex layout (default: HORIZONTAL) ---@field flexDirection FlexDirection -- Direction of flex layout (default: HORIZONTAL)
---@field justifyContent JustifyContent -- Alignment of items along main axis (default: FLEX_START) ---@field justifyContent JustifyContent -- Alignment of items along main axis (default: FLEX_START)
@@ -387,10 +385,8 @@ Window.__index = Window
---@field borderColor Color? -- Color of the border (default: black) ---@field borderColor Color? -- Color of the border (default: black)
---@field background Color? -- Background color (default: transparent) ---@field background Color? -- Background color (default: transparent)
---@field gap number? -- Space between children elements (default: 10) ---@field gap number? -- Space between children elements (default: 10)
---@field px number? -- Horizontal padding around children (default: 0) ---@field padding {top?:number, right?:number, bottom?:number, left?:number}? -- Padding around children (default: {top=0, right=0, bottom=0, left=0})
---@field py number? -- Vertical padding around children (default: 0) ---@field margin {top?:number, right?:number, bottom?:number, left?:number}? -- Margin around children (default: {top=0, right=0, bottom=0, left=0})
---@field mx number? -- Horizontal margin around children (default: 0)
---@field my number? -- Vertical margin around children (default: 0)
---@field text string? -- Text content to display (default: nil) ---@field text string? -- Text content to display (default: nil)
---@field titleColor Color? -- Color of the text content (default: black) ---@field titleColor Color? -- Color of the text content (default: black)
---@field textAlign TextAlign? -- Alignment of the text content (default: START) ---@field textAlign TextAlign? -- Alignment of the text content (default: START)
@@ -451,10 +447,8 @@ function Window.new(props)
end end
self.gap = props.gap or 10 self.gap = props.gap or 10
self.px = props.px or 0 self.padding = props.padding or { top = 0, right = 0, bottom = 0, left = 0 }
self.py = props.py or 0 self.margin = props.margin or { top = 0, right = 0, bottom = 0, left = 0 }
self.mx = props.mx or 0
self.my = props.my or 0
self.text = props.text self.text = props.text
self.textColor = props.textColor self.textColor = props.textColor
@@ -567,67 +561,67 @@ function Window:layoutChildren()
end end
end end
-- Position children -- Position children
local currentPos = spacing local currentPos = spacing
for _, child in ipairs(self.children) do for _, child in ipairs(self.children) do
if child.positioning == Positioning.ABSOLUTE then if child.positioning == Positioning.ABSOLUTE then
goto continue goto continue
end end
if self.flexDirection == FlexDirection.VERTICAL then if self.flexDirection == FlexDirection.VERTICAL then
child.x = currentPos + self.mx child.x = currentPos + (self.margin.left or 0)
child.y = 0 child.y = 0
-- Apply alignment to vertical axis (alignItems) -- Apply alignment to vertical axis (alignItems)
if self.alignItems == AlignItems.FLEX_START then if self.alignItems == AlignItems.FLEX_START then
--nothing, currentPos is all --nothing, currentPos is all
elseif self.alignItems == AlignItems.CENTER then elseif self.alignItems == AlignItems.CENTER then
child.y = (self.height - (child.height or 0)) / 2 child.y = (self.height - (child.height or 0)) / 2
elseif self.alignItems == AlignItems.FLEX_END then elseif self.alignItems == AlignItems.FLEX_END then
child.y = self.height - (child.height or 0) child.y = self.height - (child.height or 0)
elseif self.alignItems == AlignItems.STRETCH then elseif self.alignItems == AlignItems.STRETCH then
child.height = self.height child.height = self.height
end end
-- Apply self alignment to vertical axis (alignSelf) -- Apply self alignment to vertical axis (alignSelf)
if child.alignSelf == AlignSelf.FLEX_START then if child.alignSelf == AlignSelf.FLEX_START then
--nothing, currentPos is all --nothing, currentPos is all
elseif child.alignSelf == AlignSelf.CENTER then elseif child.alignSelf == AlignSelf.CENTER then
child.y = (self.height - (child.height or 0)) / 2 child.y = (self.height - (child.height or 0)) / 2
elseif child.alignSelf == AlignSelf.FLEX_END then elseif child.alignSelf == AlignSelf.FLEX_END then
child.y = self.height - (child.height or 0) child.y = self.height - (child.height or 0)
elseif child.alignSelf == AlignSelf.STRETCH then elseif child.alignSelf == AlignSelf.STRETCH then
child.height = self.height child.height = self.height
end end
currentPos = currentPos + (child.width or 0) + self.gap + self.mx * 2 currentPos = currentPos + (child.width or 0) + self.gap + (self.margin.left or 0) + (self.margin.right or 0)
else else
child.y = currentPos + self.my child.y = currentPos + (self.margin.top or 0)
-- Apply alignment to horizontal axis (alignItems) -- Apply alignment to horizontal axis (alignItems)
if self.alignItems == AlignItems.FLEX_START then if self.alignItems == AlignItems.FLEX_START then
--nothing, currentPos is all --nothing, currentPos is all
elseif self.alignItems == AlignItems.CENTER then elseif self.alignItems == AlignItems.CENTER then
child.x = (self.width - (child.width or 0)) / 2 child.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.width - (child.width or 0) child.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 horizontal axis (alignSelf) -- Apply self alignment to horizontal axis (alignSelf)
if child.alignSelf == AlignSelf.FLEX_START then if child.alignSelf == AlignSelf.FLEX_START then
--nothing, currentPos is all --nothing, currentPos is all
elseif child.alignSelf == AlignSelf.CENTER then elseif child.alignSelf == AlignSelf.CENTER then
child.x = (self.width - (child.width or 0)) / 2 child.x = (self.width - (child.width or 0)) / 2
elseif child.alignSelf == AlignSelf.FLEX_END then elseif child.alignSelf == AlignSelf.FLEX_END then
child.x = self.width - (child.width or 0) child.x = self.width - (child.width or 0)
elseif child.alignSelf == AlignSelf.STRETCH then elseif child.alignSelf == AlignSelf.STRETCH then
child.width = self.width child.width = self.width
end end
currentPos = currentPos + (child.height or 0) + self.gap + self.my * 2 currentPos = currentPos + (child.height or 0) + self.gap + (self.margin.top or 0) + (self.margin.bottom or 0)
end end
::continue:: ::continue::
end end
end end
--- Destroy window and its children --- Destroy window and its children
@@ -683,25 +677,35 @@ function Window:draw()
-- Draw borders based on border property -- Draw borders based on border property
love.graphics.setColor(self.borderColor:toRGBA()) love.graphics.setColor(self.borderColor:toRGBA())
if self.border.top then if self.border.top then
love.graphics.line(self.x + self.px, self.y + self.py, self.x + self.width - self.px, self.y + self.py) love.graphics.line(
self.x + (self.padding.left or 0),
self.y + (self.padding.top or 0),
self.x + self.width - (self.padding.right or 0),
self.y + (self.padding.top or 0)
)
end end
if self.border.bottom then if self.border.bottom then
love.graphics.line( love.graphics.line(
self.x + self.px, self.x + (self.padding.left or 0),
self.y + self.height - self.py, self.y + self.height - (self.padding.bottom or 0),
self.x + self.width - self.px, self.x + self.width - (self.padding.right or 0),
self.y + self.height - self.py self.y + self.height - (self.padding.bottom or 0)
) )
end end
if self.border.left then if self.border.left then
love.graphics.line(self.x + self.px, self.y + self.py, self.x + self.px, self.y + self.height - self.py) love.graphics.line(
self.x + (self.padding.left or 0),
self.y + (self.padding.top or 0),
self.x + (self.padding.left or 0),
self.y + self.height - (self.padding.bottom or 0)
)
end end
if self.border.right then if self.border.right then
love.graphics.line( love.graphics.line(
self.x + self.width - self.px, self.x + self.width - (self.padding.right or 0),
self.y + self.py, self.y + (self.padding.top or 0),
self.x + self.width - self.px, self.x + self.width - (self.padding.right or 0),
self.y + self.height - self.py self.y + self.height - (self.padding.bottom or 0)
) )
end end
@@ -794,54 +798,62 @@ function Window:resize(newGameWidth, newGameHeight)
end end
--- Calculate auto width based on children --- Calculate auto width based on children
function Window:calculateAutoWidth() function Window:calculateAutoWidth()
if self.autosizing == false then if self.autosizing == false then
return return
end end
if not self.children or #self.children == 0 then if not self.children or #self.children == 0 then
self.width = 0 self.width = 0
end end
Logger:debug("children count: " .. #self.children) Logger:debug("children count: " .. #self.children)
local maxWidth = 0 local maxWidth = 0
for _, child in ipairs(self.children) do for _, child in ipairs(self.children) do
local childWidth = child.width or 0 local childWidth = child.width or 0
local childX = child.x or 0 local childX = child.x or 0
local paddingAdjustment = child.px * 2 local paddingAdjustment = (child.padding.left or 0) + (child.padding.right or 0)
local totalWidth = childX + childWidth + paddingAdjustment local totalWidth = childX + childWidth + paddingAdjustment
if totalWidth > maxWidth then if totalWidth > maxWidth then
maxWidth = totalWidth maxWidth = totalWidth
end end
end end
-- Add window's own px padding and mx margins to the final width -- Add window's own padding and margin to the final width
self.width = maxWidth + (self.px * 2) + (self.mx * 2) self.width = maxWidth
+ (self.padding.left or 0)
+ (self.padding.right or 0)
+ (self.margin.left or 0)
+ (self.margin.right or 0)
end end
--- Calculate auto height based on children --- Calculate auto height based on children
function Window:calculateAutoHeight() function Window:calculateAutoHeight()
if self.autosizing == false then if self.autosizing == false then
return return
end end
if not self.children or #self.children == 0 then if not self.children or #self.children == 0 then
self.height = 0 self.height = 0
end end
local maxHeight = 0 local maxHeight = 0
for _, child in ipairs(self.children) do for _, child in ipairs(self.children) do
local childHeight = child.height or 0 local childHeight = child.height or 0
local childY = child.y or 0 local childY = child.y or 0
local paddingAdjustment = child.py * 2 local paddingAdjustment = (child.padding.top or 0) + (child.padding.bottom or 0)
local totalHeight = childY + childHeight + paddingAdjustment local totalHeight = childY + childHeight + paddingAdjustment
if totalHeight > maxHeight then if totalHeight > maxHeight then
maxHeight = totalHeight maxHeight = totalHeight
end end
end end
-- Add window's own py padding and my margins to the final height -- Add window's own padding and margin to the final height
self.height = maxHeight + (self.py * 2) + (self.my * 2) self.height = maxHeight
+ (self.padding.top or 0)
+ (self.padding.bottom or 0)
+ (self.margin.top or 0)
+ (self.margin.bottom or 0)
end end
--- Update window size to fit children automatically --- Update window size to fit children automatically
@@ -963,10 +975,8 @@ end
---@field z number -- default: 0 ---@field z number -- default: 0
---@field width number ---@field width number
---@field height number ---@field height number
---@field px number -- Horizontal padding (default: 0) ---@field padding {top?:number, right?:number, bottom?:number, left?:number} -- Padding (default: {top=0, right=0, bottom=0, left=0})
---@field py number -- Vertical padding (default: 0) ---@field margin {top?:number, right?:number, bottom?:number, left?:number} -- Margin (default: {top=0, right=0, bottom=0, left=0})
---@field mx number
---@field my number
---@field text string? ---@field text string?
---@field border Border ---@field border Border
---@field borderColor Color? ---@field borderColor Color?
@@ -992,10 +1002,8 @@ Button.__index = Button
---@field z number? ---@field z number?
---@field w number? ---@field w number?
---@field h number? ---@field h number?
---@field px number? ---@field padding {top?:number, right?:number, bottom?:number, left?:number}? -- Padding (default: {top=0, right=0, bottom=0, left=0})
---@field py number? ---@field margin {top?:number, right?:number, bottom?:number, left?:number}? -- Margin (default: {top=0, right=0, bottom=0, left=0})
---@field mx number?
---@field my number?
---@field text string? ---@field text string?
---@field callback function? ---@field callback function?
---@field background Color? ---@field background Color?
@@ -1019,10 +1027,8 @@ function Button.new(props)
self.text = props.text or nil self.text = props.text or nil
self.x = props.x or 0 self.x = props.x or 0
self.y = props.y or 0 self.y = props.y or 0
self.px = props.px or 0 self.padding = props.padding or { top = 0, right = 0, bottom = 0, left = 0 }
self.py = props.py or 0 self.margin = props.margin or { top = 0, right = 0, bottom = 0, left = 0 }
self.mx = props.mx or 0
self.my = props.my or 0
-- Add autosizing logic similar to Window class -- Add autosizing logic similar to Window class
if props.w == nil or props.h == nil then if props.w == nil or props.h == nil then
@@ -1098,18 +1104,18 @@ function Button:resize(ratioW, ratioH)
end end
---@param newText string ---@param newText string
---@param autoresize boolean? --default: false ---@param autoresize boolean? --default: false
function Button:updateText(newText, autoresize) function Button:updateText(newText, autoresize)
self.text = newText or self.text self.text = newText or self.text
if autoresize then if autoresize then
self.width = self:calculateTextWidth() + (self.px * 2) self.width = self:calculateTextWidth() + (self.padding.left or 0) + (self.padding.right or 0)
self.height = self:calculateTextHeight() + (self.py * 2) self.height = self:calculateTextHeight() + (self.padding.top or 0) + (self.padding.bottom or 0)
end end
-- If autosizing is enabled, recalculate size after text update -- If autosizing is enabled, recalculate size after text update
if self.autosizing then if self.autosizing then
self:autosize() self:autosize()
end end
end end
function Button:draw() function Button:draw()
@@ -1201,8 +1207,8 @@ end
function Button:autosize() function Button:autosize()
local textWidth = self:calculateTextWidth() local textWidth = self:calculateTextWidth()
local textHeight = self:calculateTextHeight() local textHeight = self:calculateTextHeight()
self.width = textWidth + (self.px * 2) self.width = textWidth + (self.padding.left or 0) + (self.padding.right or 0)
self.height = textHeight + (self.py * 2) self.height = textHeight + (self.padding.top or 0) + (self.padding.bottom or 0)
end end
--- Update button (propagate to children) --- Update button (propagate to children)