@jsxui/layout
v0.1.9
Published
Utilities for building grid layouts and measuring text.
Downloads
20
Maintainers
Readme
@jsxui/layout
Manage complex layouts performantly using simple constructs.
Install
yarn add @jsxui/layout
npm install @jsxui/layout
Get Started
Grid
import { Column, Grid, Node } from '@jsxui/layout'
const grid = new Grid({
columns: 12,
rows: 12,
children: [
new Column({
width: 6,
height: 12,
children: [new Node({ width: 3, height: 1 })],
}),
],
})
Column
import { Column, Node } from '@jsxui/layout'
const column = new Column({
children: [
new Node({ width: 2, height: 2 }),
new Node({ width: 4, height: 2 }),
],
})
column.addChild(new Node({ width: 6, height: 2 }))
Row
import { Node, Row } from '@jsxui/layout'
const row = new Row({
children: [
new Node({ width: 2, height: 2 }),
new Node({ width: 2, height: 2 }),
],
})
Space
import { Grid, Node, Space } from '@jsxui/layout'
const grid = new Grid({ columns: 12, rows: 1 })
const space = new Space()
grid.addChild(new Node({ width: 2, height: 1 }))
grid.addChild(space)
grid.addChild(new Node({ width: 2, height: 1 }))
Why?
Building performant layouts at scale is extremely hard. It's easy to introduce performance regressions, layout thrashing, and taking a toll on your overall application's performance. This package helps avoid these problems by providing a simple API to manage complex layouts. It does so by using strict grid principles developed by early graphic designers while utilizing novel techniques like collapsing nodes into one position.
Collapsing Layouts
Collapsing layout is the process of removing unnecessary nodes from the tree that are not required to position a node correctly.
For example, the following layout will collapse to a simple placement in the parent grid:
import { Column, Grid, Row, Node, Space } from '@jsxui/layout'
const node1 = new Node({ width: 2, height: 1 })
const node2 = new Node({ width: 2, height: 1 })
const space = new Space({ size: 2 })
const column = new Column({ children: [node1, space, node2] })
const grid = new Grid({ columns: 16, rows: 24 })
node2.getLayout() // { column: 1, row: 4, width: 2, height: 1 }
This encourages declarative layout by not penalizing the user for using nested layouts. In the future, a compiler can do these optimizations ahead of time where possible.