Options

Layout options

The second argument of layout(input, options) and engine.layout(input, options). The defaults of an engine (createEngine({ defaults })) come first, and the options of one call replace them.

Option	Type	Default	Meaning
spacing	number	24	The base distance in pixels. The default gap and padding of each container come from it.
nodeSize	{ width, height }	120 × 48	The size of a leaf with no size in its spec.
header	number	24	The smallest space above the content of a nested container, for its label. The padding counts as a part of it.
router	string	"straight"	The router of the edges: straight, orthogonal, avoid or a router that you register.
treeEdges	"linked", "all", "none"	"linked"	The tree edges of the output. See edges.
origin	{ x, y }	{ x: 0, y: 0 }	The top-left corner of the root box.
measure	(node) => size or undefined	none	The size of a leaf. Use it to measure the labels.
audit	boolean	true	With false, the engine does not examine the layout. It is a little faster.
strict	boolean	false	With true, the engine throws an IrekoError for each finding with the severity error.
trace	(event) => void	none	A function that gets the output of each phase. See the pipeline.

A node

The input is { root, edges }. The root and each child is a NodeSpec.

Field	Type	Default	Meaning
id	string	none, give one	The identifier. Each node of a tree has a different identifier.
label	string	the id	The text that a renderer shows.
layout	string or { type, ...options }	"grid"	The strategy that arranges the children, with its options.
mode	"linked", "nested"	"linked"	Where the children go: around the box, or inside it.
fit	"grow", "scale", "clip"	"grow"	The policy of a nested container with a size. See fit.
size	{ width?, height? }	nodeSize	The size of a leaf, or the smallest size of a container.
children	NodeSpec[]	none	The children.
data	any	none	Your data. The engine copies it to the output, and does not read it.

An edge

Field	Type	Default	Meaning
source, target	string	none, give them	The identifiers of two nodes of the tree.
id	string	edge-N	The identifier. N is the place of the edge in the list, from 0.
label	string	none	The text at the middle of the route.
data	any	none	Your data. The engine copies it to the output.

Options of each container

Each strategy has these options too. The engine reads them.

Option	Type	Default	Meaning
gap	number, 0 or more	spacing	The distance between two children.
padding	number, 0 or more	spacing	The space inside the edge of a nested container.
header	number, 0 or more	the header option	The smallest space above the content of a nested container.

grid

The options of the strategy grid

Option	Type	Default	Description
columns	integer (0 or more)	0	The number of columns. With 0, the nested mode makes an approximately square grid, and the linked mode makes one row.
justify	"start" | "center" | "end"	"center"	The horizontal place of a child in its cell.
align	"auto" | "start" | "center" | "end"	"auto"	The vertical place of a child in its cell. With auto, linked children align at the top, and nested children at the center.
uniform	boolean	false	If true, all cells have the size of the largest cell.
side	"bottom" | "top" | "left" | "right"	"bottom"	In the linked mode, the side of the node where the children go.
distance	number (0 or more)	0	In the linked mode, the distance between the node and its children. The value 0 means 1.5 times the gap.

radial

The options of the strategy radial

Option	Type	Default	Description
startAngle	number (-360 to 360)	-90	The angle of the first child, in degrees. The value 0 is to the right, and -90 is at the top.
sweep	number (1 to 360)	360	The angle of the arc that holds the children, in degrees. The value 360 is a full ring.
clockwise	boolean	true	If true, the children follow the clockwise direction on the screen.
distance	number (0 or more)	0	In the linked mode, the smallest distance between the node and the circle of a child. The value 0 means the gap.

tree

The options of the strategy tree

Option	Type	Default	Description
side	"bottom" | "top" | "left" | "right"	"bottom"	The side of the node where the children go.
distance	number (0 or more)	0	The distance between the node and its children. The value 0 means 1.5 times the gap.
align	"center" | "start" | "end"	"center"	The place of the node along the row of its children: over the middle, the first child or the last child.

layers

The options of the strategy layers

Option	Type	Default	Description
side	"bottom" | "top" | "left" | "right"	"bottom"	The side where the edges go: the first layer is on the other side.
distance	number (0 or more)	0	The distance between two layers. The value 0 means 2 times the gap.
align	"center" | "start" | "end"	"center"	The place of a layer across the direction of the edges: at the start, at the middle or at the end.

The engine

createEngine(config) and engine.extend(config):

Field	Type	Meaning
strategies	Strategy[]	More strategies. A strategy with the type of a built-in strategy replaces it.
routers	Router[]	More routers. A router with the type of a built-in router replaces it.
defaults	LayoutOptions	The default options of each layout of this engine.
limits	{ maxNodes?, maxDepth?, maxChildren? }	The limits. The defaults are 100000, 10000 and 10000.

The live renderers

mountSvg, mountDom, mountCanvas and <LayoutView>:

Option	Type	Default	Meaning
theme	Partial<Theme>	lightTheme	The colors and the fonts.
viewport	Viewport	a new viewport	The pan and the zoom. Share one to move two views together.
interactive	boolean	true	Pan with the pointer, zoom with the wheel.
duration	number	320	The time of the animation, in milliseconds.
fit	boolean	true	The first layout fills the element.

<LayoutView> also has layout, renderer ("svg", "dom" or "canvas"), selected, onPick, className and style.

toSVG

Option	Type	Default	Meaning
theme	Partial<Theme>	lightTheme	The colors and the fonts.
padding	number	16	The space around the layout.
title	string	none	The title of the image, for assistive technology.
labels	boolean	true	With false, the output has no text.
background	boolean	true	With false, the output has no background rectangle.

The theme

Field	Light	Meaning
background, nodeFill, nodeStroke	colors	The page and the boxes.
containerFill, containerStroke	colors	The nested containers.
text, mutedText	colors	The labels of boxes, and the labels of containers and edges.
edge, extraEdge	colors	The tree edges, and the extra edges (dashed).
accent	color	The selected boxes.
radius, fontSize, fontFamily	numbers, font	The corners and the text.

lightTheme, darkTheme and themeOf(partial, base) are in ireko/render.

The text language

parse(text, { strategies }) and print(input, { strategies, width }):

Option	Default	Meaning
strategies	BUILTIN_STRATEGY_NAMES: grid, radial, tree and layers	The names of the strategies. Give the names of the strategies that you register.
width (print)	80	The largest length of a line of leaves.

layoutFlow

All layout options, and rootLayout, nodeSpec, hierarchy, engine and edgeType. Refer to the React Flow guide.