Layout Engines Architecture
FlowLayout, GridLayout, StackLayout, and ILayoutManager for automatic component positioning.
The layout subsystem provides automatic positioning of components within containers.
Available Layouts
- FlowLayout: Left-to-right, top-to-bottom wrapping (like HTML inline flow)
- GridLayout: Fixed column count grid with configurable cell sizes
- StackLayout: Vertical or horizontal stacking with spacing and alignment
All layout engines implement ILayoutManager which exposes Layout(List. Layouts recalculate positions on component add/remove/resize events.
Automatic Layout Engines
The layout engines compute positions for every component from the graph structure. Each implements the auto-layout contract and can be run over the current selection or the whole diagram.
ForceDirectedLayout
Force-directed layout for network graphs. Uses simple spring-electric repulsion/attraction to position nodes.
| Member | Kind | Description |
|---|---|---|
int Iterations | Property | Gets or sets the iterations. |
float RepulsionStrength | Property | Gets or sets the repulsion strength. |
float AttractionStrength | Property | Gets or sets the attraction strength. |
float IdealEdgeLength | Property | Gets or sets the ideal edge length. |
float Damping | Property | Gets or sets the damping. |
float CenterX | Property | Gets or sets the center x. |
float CenterY | Property | Gets or sets the center y. |
void Arrange(IReadOnlyList<SkiaComponent> components, IReadOnlyList<IConnectionLine> lines) | Method |
HierarchicalLayout
Hierarchical (layered Sugiyama-style) auto-layout for flowcharts and DAG diagrams. Places nodes in layers based on longest path from sources, then minimizes crossings.
| Member | Kind | Description |
|---|---|---|
bool TopToBottom | Property | Gets or sets the top to bottom. |
float LayerSpacing | Property | Gets or sets the layer spacing. |
float NodeSpacing | Property | Gets or sets the node spacing. |
float StartX | Property | Gets or sets the start x. |
float StartY | Property | Gets or sets the start y. |
void Arrange(IReadOnlyList<SkiaComponent> components, IReadOnlyList<IConnectionLine> lines) | Method |
RadialLayout
Radial auto-layout for MindMap diagrams. Children radiate outward from a central node at configurable angles and radius.
| Member | Kind | Description |
|---|---|---|
float MinRadius | Property | Gets or sets the min radius. |
float RadiusIncrement | Property | Gets or sets the radius increment. |
float StartAngle | Property | Gets or sets the start angle. |
float SweepAngle | Property | Gets or sets the sweep angle. |
void Arrange(IReadOnlyList<SkiaComponent> components, IReadOnlyList<IConnectionLine> lines) | Method |
GridAutoLayout
Grid layout for UML class diagrams and similar structured layouts.
| Member | Kind | Description |
|---|---|---|
int Columns | Property | Gets or sets the columns. |
float HorizontalSpacing | Property | Gets or sets the horizontal spacing. |
float VerticalSpacing | Property | Gets or sets the vertical spacing. |
float StartX | Property | Gets or sets the start x. |
float StartY | Property | Gets or sets the start y. |
void Arrange(IReadOnlyList<SkiaComponent> components, IReadOnlyList<IConnectionLine> lines) | Method |
FlowLayout
A layout manager that arranges components in a flow, similar to text flow. Components are placed horizontally until there's no more space, then wrap to the next line.
| Member | Kind | Description |
|---|---|---|
float HorizontalSpacing | Property | Gets or sets the horizontal spacing between components. |
float VerticalSpacing | Property | Gets or sets the vertical spacing between rows of components. |
void Layout(IEnumerable<SkiaComponent> components, SKRect bounds, float padding = 0) | Method | Lays out the specified components within the given bounds. The components to layout. The bounds in which to layout the components. The padding around the layout area. |
GridLayout
A layout manager that arranges components in a grid with a fixed number of columns.
| Member | Kind | Description |
|---|---|---|
int Columns | Property | Gets or sets the number of columns in the grid. |
float HorizontalSpacing | Property | Gets or sets the horizontal spacing between components. |
float VerticalSpacing | Property | Gets or sets the vertical spacing between components. |
GridLayout() { } | Method | Initializes a new instance of the GridLayout class. |
GridLayout(int columns) | Method | Initializes a new instance of the GridLayout class with specified columns. The number of columns in the grid. |
void Layout(IEnumerable<SkiaComponent> components, SKRect bounds, float padding = 0) | Method | Lays out the specified components within the given bounds. The components to layout. The bounds in which to layout the components. The padding around the layout area. |
StackLayout
A layout manager that arranges components in a stack, either vertically or horizontally.
| Member | Kind | Description |
|---|---|---|
Orientation Orientation | Property | Gets or sets the orientation of the stack. |
float Spacing | Property | Gets or sets the spacing between components. |
StackLayout() { } | Method | Initializes a new instance of the StackLayout class. |
StackLayout(Orientation orientation) | Method | Initializes a new instance of the StackLayout class with specified orientation. The orientation of the stack. |
void Layout(IEnumerable<SkiaComponent> components, SKRect bounds, float padding = 0) | Method | Lays out the specified components within the given bounds. The components to layout. The bounds in which to layout the components. The padding around the layout area. |