buju (布局) is a simple layout engine, it is a Nim port of layout.h. It has fixed several bugs left over from the original implementation and optimized the performance of some functions.
- Layout Visualization Tool - Used to debug exported layout JSON files.
- Added main/cross axis alignment and gap support compared to the original version.
- Does not support constraint-based solving.
- Layout uses absolute coordinates.
- Only supports border-box.
import buju
var l = Context()
let root = l.node()
l.setLayout(LayoutFree)
l.setSize(root, [float32(50), 50])
template alignBox(n, align) =
let n = l.node()
l.setSize(n, [float32(10), 10])
l.setAlign(n, align)
l.insertChild(root, n)
# |2|4|3|
# |5|7|6|
# |8|10|9|
alignBox(node2, {AlignTop, AlignLeft})
alignBox(node3, {AlignTop, AlignRight})
alignBox(node4, {AlignTop})
alignBox(node5, {AlignLeft})
alignBox(node6, {AlignRight})
alignBox(node7, {})
alignBox(node8, {AlignBottom, AlignLeft})
alignBox(node9, {AlignBottom, AlignRight})
alignBox(node10,{AlignBottom})
l.compute(root)
check l.computed(node2) == [float32(0), 0, 10, 10]
check l.computed(node3) == [float32(40), 0, 10, 10]
check l.computed(node4) == [float32(20), 0, 10, 10]
check l.computed(node5) == [float32(0), 20, 10, 10]
check l.computed(node6) == [float32(40), 20, 10, 10]
check l.computed(node7) == [float32(20), 20, 10, 10]
check l.computed(node8) == [float32(0), 40, 10, 10]
check l.computed(node9) == [float32(40), 40, 10, 10]
check l.computed(node10) == [float32(20), 40, 10, 10]