yogurt-layout
v0.0.5
Published
A small JS layout computation library, to organize space in SVGs and canvases.
Downloads
433
Readme
Install
yarn add yogurt-layout
or
npm install yogurt-layout --save
Example
To obtain this result:
Do this and then render the given <rect>
s:
const layout = makeLayout({
id: 'root',
direction: 'column',
width: 500,
height: 500,
padding: 20,
children: [
{ id: 'title', width: '100%', height: 50 },
{
id: 'chart',
width: '100%',
height: 'auto',
direction: 'row',
padding: 0,
children: [
{ id: 'left', width: 100, height: '100%' },
{
id: 'center-wrapper',
width: 'auto',
height: '100%',
padding: [10, 20],
direction: 'row',
children: [{ id: 'center', width: '100%', height: '100%' }],
},
{ id: 'right', width: 100, height: '100%' },
],
},
{ id: 'legend', width: '100%', height: 150 },
],
})
console.log(layout)
// layout === {
// root: { top, left, right, bottom, width, height },
// title: { top, left, right, bottom, width, height },
// chart: { top, left, right, bottom, width, height },
// legend: { top, left, right, bottom, width, height },
// ...
// }
API
The only exported function is makeLayout
, which is to be called with a nested configuration of LayoutNodes.
The root node LayoutNodeRoot must have numerical width
and height
, the nested ones can have them in pixels (integers), percentages (strings as '50%'
), or 'auto'
to make it auto-expanding and take the remaining space.
Every LayoutNode can also have children, a direction
to position them ('row' | 'column'
) and a padding (ssupporting CSS format as arrays).
The output is an object with the ids as keys, and the LayoutBlocks { width, height, left, top }
as values.
declare function makeLayout(root: LayoutNodeRoot): Dictionary<LayoutBlock>
// Where:
type LayoutNode = {
id: string
children?: LayoutNode[]
width: number | Percentage | 'auto'
height: number | Percentage | 'auto'
direction?: 'row' | 'column'
padding?: PaddingFormat //
}
type LayoutNodeRoot = LayoutNode & { width: number; height: number; top?: number; left?: number }
type PaddingFormat =
| number
| [number, number]
| [number, number, number, number]
| { top?: number; right?: number; bottom?: number; left?: number }
type LayoutBlock = {
id: string
width: number
height: number
top: number
left: number
}
License
This project was bootstrapped with urca generator.