diff --git a/.gitignore b/.gitignore index e71b4ee..145de6e 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,4 @@ node_modules/ # Compiled Playdate games *.pdx -*.pdx.zip \ No newline at end of file +*.pdx.zip diff --git a/README.md b/README.md index 6ba1b55..2474b05 100644 --- a/README.md +++ b/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` diff --git a/playout.lua b/playout.lua index 0a74817..9b01a01 100644 --- a/playout.lua +++ b/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)