Constraints

Enforce drag and resize rules.

Constraints are small functions that clamp item position and size during drag or resize. They run in order: grid-level constraints first, then per-item constraints on the LayoutItem.

Built-in constraints

Constraint	Description
`gridBounds`	Keep items inside the grid bounds.
`minMaxSize`	Respect `minW`, `maxW`, `minH`, `maxH` on items.
`containerBounds`	Clamp movement to the visible container height.
`boundedX`	Clamp horizontal movement only.
`boundedY`	Clamp vertical movement only.
`aspectRatio(ratio)`	Maintain a width/height ratio while resizing.
`snapToGrid(stepX, stepY)`	Snap movement to grid steps.
`minSize(minW, minH)`	Enforce minimum size.
`maxSize(maxW, maxH)`	Enforce maximum size.
`defaultConstraints`	`[gridBounds, minMaxSize]`.

Using constraints

Published with Edda

Constraints

Enforce drag and resize rules.

Constraints are small functions that clamp item position and size during drag or resize. They run in order: grid-level constraints first, then per-item constraints on the LayoutItem.

Built-in constraints

Constraint	Description
`gridBounds`	Keep items inside the grid bounds.
`minMaxSize`	Respect `minW`, `maxW`, `minH`, `maxH` on items.
`containerBounds`	Clamp movement to the visible container height.
`boundedX`	Clamp horizontal movement only.
`boundedY`	Clamp vertical movement only.
`aspectRatio(ratio)`	Maintain a width/height ratio while resizing.
`snapToGrid(stepX, stepY)`	Snap movement to grid steps.
`minSize(minW, minH)`	Enforce minimum size.
`maxSize(maxW, maxH)`	Enforce maximum size.
`defaultConstraints`	`[gridBounds, minMaxSize]`.

Using constraints

Published with Edda

Constraints

Built-in constraints

Using constraints

Constraints

Built-in constraints

Using constraints

Writing custom constraints

Constraint utilities