GridLayout

GridLayout is an object which contains several functions.

Functions

layout()

Rearrange graph or shapes into a layout, specified by layout options. The function returns special grid metrics object.

GridLayout.layout(graphOrCells: dia.Graph | Array<dia.Cell>, opt?: Options): GridMetrics;

Types

GridMetrics

Grid metrics returned by the layout() function.

type GridMetrics = {
    rowHeights: number[];
    columnWidths: number[];
    gridX: number[];
    gridY: number[];
    bbox: g.Rect;
};

Properties description:

• bbox - a tight bounding box around the elements
• gridX - an array of x-coordinates of vertical separators between columns.
• gridY - an array of y-coordinates of horizontal separators between rows.
• rowHeights - an array of row heights
• columnWidths - an array of column widths

Options

Type of options parameter of the layout() function.

interface Options {
    resizeToFit?: boolean;
    marginX?: number;
    marginY?: number;
    columns?: number;
    columnWidth?: 'compact' | 'auto' | number | string;
    rowHeight?: 'compact' | 'auto' | number | string;
    verticalAlign?: 'top' | 'middle' | 'bottom';
    horizontalAlign?: 'left' | 'middle' | 'right';
    columnGap?: number;
    rowGap?: number;
    deep?: boolean;
    parentRelative?: boolean;
    setAttributes?: (element: dia.Element, attributes: dia.Element, opt: Options) => void;
}

Properties description:

Name	Description
columns	Number of columns. It defaults to 1.
columnWidth	'auto' - width of a column is equal to the widest element amongst all elements 'compact' - width of a column is equal to the widest element in the column number - value of a column width (e.g. 200) It defaults to 'auto'.
rowHeight	'auto' - height of a row is equal to the highest element amongst all elements 'compact' - height of a row is equal to the highest element in the row number - value of a row height (e.g. 100) It defaults to 'auto'.
verticalAlign	'top' - the elements in the grid are aligned to the top of a grid cell 'middle' - the elements in the grid are aligned to the center of a grid cell 'bottom' - the elements in the grid are aligned to the bottom of a grid cell. It defaults to 'middle'.
horizontalAlign	'left' - the elements in the grid are aligned to the left side of a grid cell 'middle' - the elements in the grid are aligned to the center of a grid cell 'right' - the elements in the grid are aligned to the right side of a grid cell. It defaults to 'middle'.
columnGap	The horizontal gap between columns. It defaults to 0.
rowGap	The vertical gap between rows. It defaults to 0.
resizeToFit	Resizes the elements to fit a grid cell, preserving the aspect ratio. It defaults to false.
marginX	Sets the origin (x coordinate) of the most top-left element. It defaults to 0.
marginY	Sets the origin (y coordinate) of the most top-left element. It defaults to 0.
deep	Uses deep positioning for elements when set to true. i.e. moves not only the elements but also their descendants. It defaults to false.
parentRelative	Position the elements relatively to their parents. It defaults to false
setAttributes()	A callback function to customize how the positions (and sizes when resizeToFit enabled) are set to the elements.