pixi-silk/ui/spacing

SpacingMarkers and findSpacing: equal-gap hints.

import { SpacingMarkers, findSpacing, gapsBetween, spacingFromSnap } from 'pixi-silk/ui/spacing';

Classes#

Class	Description
SpacingMarkers	Draws smart spacing: gap segments with end bars and a value pill, and thin alignment lines with crosses at their ends. Each marker fades in when found and out when lost, and grows from its middle. Markers are matched across calls by position, rounded to half a unit.

Interface	Description
AlignLine	An alignment line. All values are in the boxes’ space.
FindSpacingOptions	Options of findSpacing.
GapMarker	A gap marker between two boxes. All values are in the boxes’ space.
SpacingMarkersOptions	Options of SpacingMarkers.
SpacingResult	What findSpacing found: equal gaps to show and edges or centres that line up.

Function	Description
findSpacing	Smart spacing for a box being dragged among others. When the gap to a neighbour equals another gap in the same row or column, every one of those gaps is returned. Edges and centres that line up with other boxes come back as lines spanning them. Edges only match edges, centres only centres.
gapsBetween	The gaps between consecutive rectangles along an axis, sorted by position, for rows and columns. Overlapping or touching neighbours have no gap. Use it to show the spacing of an auto-layout container’s children. It does not check that the rectangles share a row.
spacingFromSnap	Converts a SnapEngine result, or its guides, to a SpacingResult for SpacingMarkers. Spacing guides become gaps, every other guide becomes a line.