🍦 Yogurt Layout 🥛

A small JS layout computation library, to organize space in SVGs and canvases.

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

MIT © Accurat

---

This project was bootstrapped with urca generator.