yarn add yogurt-layoutor
npm install yogurt-layout --saveTo 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 },
// ...
// }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
}This project was bootstrapped with urca generator.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent