diff --git a/components/diagram/layouts.md b/components/diagram/layouts.md index 387303b0a..266cc262f 100644 --- a/components/diagram/layouts.md +++ b/components/diagram/layouts.md @@ -26,7 +26,7 @@ The Tree Diagram layout positions the shapes in a hierarchical way. A typical us ### Tree Layout Subtypes -The Layered Diagram layout has the following sub types: +The Tree Diagram layout has the following sub types: * `Down`—the root shape is at the top and all descendants are arranged below it. * `Left`—the root shape is on the right. @@ -37,12 +37,44 @@ The Layered Diagram layout has the following sub types: * `TipOver`—a variation of the `Down` sub type. The root shape is at the top. The direct children are arranged horizontally in a row, while the grand children are arranged verticallu on columns. * `Up`—the root shape is at the bottom. ->caption Setting a Tree Diagram Layout Subtype +`` provides apperance settings that apply to specific tree layout sub types. The snippets below list these settings and their default values. `HorizontalSeparation` and `VerticalSeparation` apply to all sub types, except `Radial`. + +>caption Using a classic Tree Diagram Layout + +````RAZOR.skip-repl + + + +```` + +>caption Using a Radial Tree Diagram Layout + +````RAZOR.skip-repl + + + +```` + +When using the Tree `TipOver` sub type, the `HorizontalSeparation` and `VerticalSeparation` parameters affect the distances between shapes at the initial levels, which are not affected by the tipover algorithm. The number of these levels depends on the value of `TipOverTreeStartLevel`. + +>caption Using a TipOver Tree Diagram Layout ````RAZOR.skip-repl + Subtype="@DiagramLayoutSubtype.TipOver" + TipOverTreeStartLevel="1" + UnderneathHorizontalOffset="15" + UnderneathVerticalSeparation="15" + UnderneathVerticalTopOffset="15" /> ```` @@ -62,11 +94,14 @@ The layered layout works best with: When the graph is a tree, the layout reduces to a standard tree layout and thus can be considered as an extension to the classic tree layout. +The `LayerSeparation` parameter sets the distance between the layout layers. The default value is `50`. + >caption Using the Layered Diagram Layout ````RAZOR.skip-repl - + ```` @@ -92,18 +127,25 @@ The Layered Diagram layout has the following sub types. Each subtype name signif The [Force-directed Diagram layout](https://en.wikipedia.org/wiki/Force-directed_graph_drawing) (also known as the spring-embedder algorithm) is based on a physical simulation of forces acting on the Diagram nodes (shapes), whereby the connections define whether two nodes act upon each other. Each link is like a spring embedded in the Diagram. The simulation attempts to find a minimum energy state, so that the springs are in their base state and do not pull or push any linked node. -> The force-directed Diagram layout is non-deterministic. Each layout pass is unique, unpredictable, and not reproducible. +The force-directed Diagram layout is non-deterministic. Each layout pass is unique, unpredictable, and not reproducible. + +The layout provides two settings that affect the final appearance: + +* `NodeDistance` defines the optimal distance between the shapes for minimum energy state. The default value is `50`. +* `Iterations` sets the number of position calculations. A larger number produces better results, but is more resource-intensive. The default value is `300`. + +The force-directed layout type has no subtypes. >caption Using the Force Diagram Layout ````RAZOR.skip-repl - + ```` -The force-directed layout type has no subtypes. - ## Example The following example demonstrates all Diagram layout types and sub types. @@ -317,46 +359,78 @@ The `` tag exposes settings that allow you to define: * The horizontal and vertical distance (offset) between the components and the Diagram boundaries. * The width of the layout grid. If the width is large enough, the Diagram displays multiple components (groups) in a single row. Otherwise the components fall one below another. +The following example starts with the default values of the `DiagramLayoutGrid` parameters, except the `Width` which has a default value of `1500`. Use the Up and Down arrow keys to change the NumericTextBox values more easily and observe the result. + >caption Using Diagram Layout Grid settings ````RAZOR - + - + - - + + - - + + - - + + - - + + - - + + - - + + + + + + + + + + + - - - - + + + + + + + +ComponentSpacingX: + +ComponentSpacingY: + +OffsetX: + +OffsetY: + +Width: + + +@code { + private int XSpacing { get; set; } = 20; + private int YSpacing { get; set; } = 20; + private int XOffset { get; set; } = 50; + private int YOffset { get; set; } = 50; + private int LayoutWidth { get; set; } = 500; +} ```` ## See Also