Feature: box border sides

.gitignore

@@ -27,4 +27,4 @@ node_modules/
 
 # Compiled Playdate games
 *.pdx
-*.pdx.zip
+*.pdx.zip

README.md

@@ -53,7 +53,11 @@ Returns a `playout.box`.
 | -------- | ----------- | ------------- |
 backgroundAlpha | opacity of box fill, drawn as a dither pattern. | 0 (full)
 backgroundColor | color to fill the box when drawing | `nil` (transparent)
-border | thickness of border on box | 0
+border | thickness of border on box, if this is set it will override the individual sides | 0
+borderLeft | thickness of the left border on box | 0
+borderRight | thickness of the right border on box | 0
+borderTop | thickness of the top border on box | 0
+borderBottom | thickness of the bottom border on box | 0
 borderColor | color of border (if > 0) | `playdate.graphics.kColorBlack`
 borderRadius | corner radius to use when drawing the box | 0
 direction | direction of layout. can be horizontal (children will be in a row) or vertical (children will be in a column) | `playout.kDirectionVertical`

playout.lua

@@ -86,6 +86,10 @@ local defaultBoxProperties = {
   vAlign = kAlignCenter,
   selfAlign = nil,
   border = 0,
+  borderLeft = 0,
+  borderRight = 0,
+  borderTop = 0,
+  borderBottom = 0,
   borderColor = gfx.kColorBlack,
   borderRadius = 0,
   spacing = 0,
@@ -215,7 +219,8 @@ function box:layout(context)
     if isVertical and totalFlex > 0 then
       actualHeight = constrainedHeight
     else
-      actualHeight = math.max(props.minHeight, math.min(intrinsicHeight + paddingTop + paddingBottom + shadow, props.maxHeight))
+      actualHeight = math.max(props.minHeight,
+        math.min(intrinsicHeight + paddingTop + paddingBottom + shadow, props.maxHeight))
       remainingHeight = 0
     end
   end
@@ -339,6 +344,44 @@ function box:draw(rect)
     else
       gfx.drawRoundRect(r, props.borderRadius)
     end
+  elseif props.borderLeft > 0 or props.borderRight > 0 or props.borderTop > 0 or props.borderBottom > 0 then
+    gfx.setColor(props.borderColor)
+    if props.borderLeft > 0 then
+      gfx.setLineWidth(props.borderLeft)
+      gfx.drawLine(
+        r.x,
+        r.y - props.borderTop / 2,
+        r.x,
+        r.y + r.height + props.borderBottom / 2
+      )
+    end
+    if props.borderRight > 0 then
+      gfx.setLineWidth(props.borderRight)
+      gfx.drawLine(
+        r.x + r.width,
+        r.y - props.borderTop / 2,
+        r.x + r.width,
+        r.y + r.height + props.borderBottom / 2
+      )
+    end
+    if props.borderTop > 0 then
+      gfx.setLineWidth(props.borderTop)
+      gfx.drawLine(
+        r.x - props.borderLeft / 2,
+        r.y,
+        r.x + r.width + props.borderRight / 2,
+        r.y
+      )
+    end
+    if props.borderBottom > 0 then
+      gfx.setLineWidth(props.borderBottom)
+      gfx.drawLine(
+        r.x - props.borderLeft / 2,
+        r.y + r.height,
+        r.x + r.width + props.borderRight / 2,
+        r.y + r.height
+      )
+    end
   end
 
   for i = 1, #self.children do
@@ -594,7 +637,7 @@ function tree:computeTabIndex(id)
   end
 
   walk(self.root)
-  
+
   table.sort(tabIndex, function(a, b)
     return a.properties.tabIndex < b.properties.tabIndex
   end)