@thi.ng/layout v3.1.20

This project is part of the @thi.ng/umbrella monorepo.

• About
  • Status
• Installation
• Dependencies
• Usage examples
• API
  • GridLayout
• Authors
• License

About

Configurable nested 2D grid layout manager.

Currently, this package features only a single grid layout allocator, as well as more generic supporting types to define other layout types / implementations.

Status

STABLE - used in production

Search or submit any issues for this package

Installation

yarn add @thi.ng/layout

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/layout"></script>

Skypack documentation

For Node.js REPL:

# with flag only for < v16
node --experimental-repl-await

> const layout = await import("@thi.ng/layout");

Package sizes (gzipped, pre-treeshake): ESM: 677 bytes

Dependencies

• @thi.ng/checks

Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

API

Generated API docs

GridLayout

The GridLayout class supports infinite nesting and column/row-based space allocation, based on an initial configuration and supporting multiple column/row spans.

The code producing this structure:

import { gridLayout } from "@thi.ng/layout";

// create a single column layout @ position 10,10 / 200px wide
// the last values are row height and cell spacing
const layout = gridLayout(10, 10, 200, 1, 16, 4);

// get next layout box (1st row)
// usually you don't need to call .next() manually, but merely pass
// the layout instance to a component...
layout.next();
// { x: 10, y: 10, w: 200, h: 16, cw: 200, ch: 16, gap: 4 }

// 2nd row
layout.next();
// { x: 10, y: 30, w: 200, h: 16, cw: 200, ch: 16, gap: 4 }

// create nested 2-column layout (3rd row)
const twoCols = layout.nest(2);

twoCols.next();
// { x: 10, y: 50, w: 98, h: 16, cw: 98, ch: 16, gap: 4 }

twoCols.next();
// { x: 112, y: 50, w: 98, h: 16, cw: 98, ch: 16, gap: 4 }

// now nest 3-columns in the 1st column of twoCols
// (i.e. now each column is 1/6th of the main layout's width)
const inner = twoCols.nest(3);

// allocate with col/rowspan, here 1 column x 4 rows
inner.next([1, 4])
// { x: 10, y: 70, w: 30, h: 76, cw: 30, ch: 16, gap: 4 }
inner.next([1, 4])
// { x: 44, y: 70, w: 30, h: 76, cw: 30, ch: 16, gap: 4 }
inner.next([1, 4])
// { x: 78, y: 70, w: 30, h: 76, cw: 30, ch: 16, gap: 4 }

// back to twoCols (2nd column)
twoCols.next([1, 2]);
// { x: 112, y: 70, w: 98, h: 36, cw: 98, ch: 16, gap: 4 }

Authors

Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-layout,
  title = "@thi.ng/layout",
  author = "Karsten Schmidt",
  note = "https://thi.ng/layout",
  year = 2019
}

License

© 2019 - 2021 Karsten Schmidt // Apache Software License 2.0