diff --git a/examples/varying_border_widths.lua b/examples/varying_border_widths.lua new file mode 100644 index 0000000..07767ac --- /dev/null +++ b/examples/varying_border_widths.lua @@ -0,0 +1,124 @@ +-- Example: Varying Border Widths +-- Demonstrates how to use different border widths on each side of an element + +local FlexLove = require("FlexLove") + +function love.load() + FlexLove.init({ + baseScale = { width = 1920, height = 1080 }, + }) + + -- Example 1: Different width on each side + FlexLove.Element.new({ + x = 50, + y = 50, + width = 200, + height = 150, + backgroundColor = FlexLove.Color.new(0.95, 0.95, 0.95, 1), + border = { + top = 1, -- Thin top border + right = 2, -- Medium right border + bottom = 3, -- Thick bottom border + left = 4, -- Very thick left border + }, + borderColor = FlexLove.Color.new(0.2, 0.4, 0.8, 1), + text = "Different width\non each side", + textSize = 16, + textAlign = "center", + padding = 20, + }) + + -- Example 2: Using boolean values (true = 1px) + FlexLove.Element.new({ + x = 300, + y = 50, + width = 200, + height = 150, + backgroundColor = FlexLove.Color.new(0.95, 0.95, 0.95, 1), + border = { + top = true, -- true becomes 1px + right = 8, -- Thick border + bottom = true,-- true becomes 1px + left = false, -- No border + }, + borderColor = FlexLove.Color.new(0.8, 0.2, 0.2, 1), + text = "Boolean borders\ntrue = 1px\nfalse = none", + textSize = 16, + textAlign = "center", + padding = 20, + }) + + -- Example 3: Uniform border with single number + FlexLove.Element.new({ + x = 550, + y = 50, + width = 200, + height = 150, + backgroundColor = FlexLove.Color.new(0.95, 0.95, 0.95, 1), + border = 5, -- All sides 5px + borderColor = FlexLove.Color.new(0.2, 0.8, 0.2, 1), + cornerRadius = 10, + text = "Uniform 5px\nall around\nwith rounded\ncorners", + textSize = 16, + textAlign = "center", + padding = 20, + }) + + -- Example 4: Decorative card with emphasis on one side + FlexLove.Element.new({ + x = 50, + y = 250, + width = 700, + height = 100, + backgroundColor = FlexLove.Color.new(1, 1, 1, 1), + border = { + top = 1, + right = 1, + bottom = 1, + left = 8, -- Thick accent border on left + }, + borderColor = FlexLove.Color.new(0.9, 0.5, 0.1, 1), + text = "Card with accent border on the left side", + textSize = 18, + padding = { left = 20, top = 10, right = 10, bottom = 10 }, + }) + + -- Instructions + FlexLove.Element.new({ + x = 50, + y = 400, + width = 700, + height = "auto", + backgroundColor = FlexLove.Color.new(0.1, 0.1, 0.1, 0.8), + text = "Border Width Options:\n• Use numbers for specific pixel widths (1, 2, 3, etc.)\n• Use true for 1px border\n• Use false for no border\n• Use a single number for uniform borders on all sides\n• Combine with cornerRadius for rounded uniform borders", + textSize = 14, + textColor = FlexLove.Color.new(1, 1, 1, 1), + padding = 20, + cornerRadius = 5, + }) +end + +function love.draw() + love.graphics.clear(0.15, 0.15, 0.2, 1) + FlexLove.draw() +end + +function love.update(dt) + FlexLove.update(dt) +end + +function love.mousepressed(x, y, button) + FlexLove.mousepressed(x, y, button) +end + +function love.mousereleased(x, y, button) + FlexLove.mousereleased(x, y, button) +end + +function love.mousemoved(x, y, dx, dy) + FlexLove.mousemoved(x, y, dx, dy) +end + +function love.wheelmoved(x, y) + FlexLove.wheelmoved(x, y) +end diff --git a/modules/Element.lua b/modules/Element.lua index 59c89e9..de45a01 100644 --- a/modules/Element.lua +++ b/modules/Element.lua @@ -439,11 +439,22 @@ function Element.new(props) -- Check if any border side is truthy local hasAnyBorder = props.border.top or props.border.right or props.border.bottom or props.border.left if hasAnyBorder then + -- Normalize border values: boolean true → 1, number → value, false/nil → false + local function normalizeBorderValue(value) + if value == true then + return 1 + elseif type(value) == "number" then + return value + else + return false + end + end + self.border = { - top = props.border.top or false, - right = props.border.right or false, - bottom = props.border.bottom or false, - left = props.border.left or false, + top = normalizeBorderValue(props.border.top), + right = normalizeBorderValue(props.border.right), + bottom = normalizeBorderValue(props.border.bottom), + left = normalizeBorderValue(props.border.left), } else self.border = nil diff --git a/modules/Renderer.lua b/modules/Renderer.lua index bf7022d..d7b970f 100644 --- a/modules/Renderer.lua +++ b/modules/Renderer.lua @@ -342,33 +342,51 @@ function Renderer:_drawBorders(x, y, borderBoxWidth, borderBoxHeight) if type(self.border) == "number" then local borderColorWithOpacity = self._Color.new(self.borderColor.r, self.borderColor.g, self.borderColor.b, self.borderColor.a * self.opacity) love.graphics.setColor(borderColorWithOpacity:toRGBA()) + love.graphics.setLineWidth(self.border) self._RoundedRect.draw("line", x, y, borderBoxWidth, borderBoxHeight, self.cornerRadius) + love.graphics.setLineWidth(1) -- Reset to default return end local borderColorWithOpacity = self._Color.new(self.borderColor.r, self.borderColor.g, self.borderColor.b, self.borderColor.a * self.opacity) love.graphics.setColor(borderColorWithOpacity:toRGBA()) - -- Check if all borders are enabled + -- Check if all borders are enabled with same width local allBorders = self.border.top and self.border.bottom and self.border.left and self.border.right + local uniformWidth = allBorders and + type(self.border.top) == "number" and + self.border.top == self.border.right and + self.border.top == self.border.bottom and + self.border.top == self.border.left - if allBorders then - -- Draw complete rounded rectangle border + if uniformWidth then + -- Draw complete rounded rectangle border with uniform width + love.graphics.setLineWidth(self.border.top) self._RoundedRect.draw("line", x, y, borderBoxWidth, borderBoxHeight, self.cornerRadius) + love.graphics.setLineWidth(1) -- Reset to default else - -- Draw individual borders (without rounded corners for partial borders) + -- Draw individual borders with varying widths (without rounded corners for partial/varying borders) if self.border.top then + local width = type(self.border.top) == "number" and self.border.top or 1 + love.graphics.setLineWidth(width) love.graphics.line(x, y, x + borderBoxWidth, y) end if self.border.bottom then + local width = type(self.border.bottom) == "number" and self.border.bottom or 1 + love.graphics.setLineWidth(width) love.graphics.line(x, y + borderBoxHeight, x + borderBoxWidth, y + borderBoxHeight) end if self.border.left then + local width = type(self.border.left) == "number" and self.border.left or 1 + love.graphics.setLineWidth(width) love.graphics.line(x, y, x, y + borderBoxHeight) end if self.border.right then + local width = type(self.border.right) == "number" and self.border.right or 1 + love.graphics.setLineWidth(width) love.graphics.line(x + borderBoxWidth, y, x + borderBoxWidth, y + borderBoxHeight) end + love.graphics.setLineWidth(1) -- Reset to default end end diff --git a/modules/types.lua b/modules/types.lua index ed3110e..0b9b87f 100644 --- a/modules/types.lua +++ b/modules/types.lua @@ -142,10 +142,10 @@ local AnimationProps = {} local ElementProps = {} ---@class Border ----@field top boolean ----@field right boolean ----@field bottom boolean ----@field left boolean +---@field top boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0) +---@field right boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0) +---@field bottom boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0) +---@field left boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0) local Border = {} ---@class TransformProps diff --git a/testing/loveStub.lua b/testing/loveStub.lua index a16b3b4..7ac2668 100644 --- a/testing/loveStub.lua +++ b/testing/loveStub.lua @@ -82,6 +82,15 @@ function love_helper.graphics.line(x1, y1, x2, y2) -- Mock line drawing end +function love_helper.graphics.setLineWidth(width) + -- Mock line width setting +end + +function love_helper.graphics.getLineWidth() + -- Mock getting line width + return 1 +end + function love_helper.graphics.polygon(mode, ...) -- Mock polygon drawing end