update to borders adding varying widths

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

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,
+        top = normalizeBorderValue(props.border.top),
-        right = props.border.right or false,
+        right = normalizeBorderValue(props.border.right),
-        bottom = props.border.bottom or false,
+        bottom = normalizeBorderValue(props.border.bottom),
-        left = props.border.left or false,
+        left = normalizeBorderValue(props.border.left),
       }
     else
       self.border = nil

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
+  if uniformWidth then
-    -- Draw complete rounded rectangle border
+    -- 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
 

modules/types.lua

@@ -142,10 +142,10 @@ local AnimationProps = {}
 local ElementProps = {}
 
 ---@class Border
----@field top boolean
+---@field top boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0)
----@field right boolean
+---@field right boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0)
----@field bottom boolean
+---@field bottom boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0)
----@field left boolean
+---@field left boolean|number -- true sets width to 1px, number sets width to specified pixels (default: 0)
 local Border = {}
 
 ---@class TransformProps

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