Class DiagramLayout
Represents the class to arrange the nodes and connectors in a tree structure.
Inheritance
System.Object
DiagramLayout
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramLayout : SfDiagramBase
Examples
<SfDiagram id="diagram" Height="600px" Nodes="@NodeCollection" @ref="@Diagram" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValue">
</SfDiagram>
@code {
SfDiagram Diagram;
public async Task DownloadDiagram()
{
string data = await Diagram.SaveDiagram();
}
ObservableCollection<DiagramNode>
NodeCollection;
ObservableCollection<DiagramConnector>
ConnectorCollection;
//Uses layout to auto-arrange nodes on the diagram page
DiagramLayout LayoutValue = new DiagramLayout()
{
//Sets layout type as HierarchicalTree...
Type = LayoutType.HierarchicalTree,
VerticalSpacing = 40,
HorizontalSpacing = 40,
};
//Sets the default properties for nodes
DiagramNode NodeDefaults = new DiagramNode()
{
Height = 40,
Width = 100,
//Initializing the default node's shape style
Style = new NodeShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" },
Annotations = new ObservableCollection<DiagramNodeAnnotation()
{
new DiagramNodeAnnotation() { Style = new AnnotationStyle() { Color = "white", Bold = true }, }
}
};
//Sets the default properties for the connectors
DiagramConnector ConnectorDefaults = new DiagramConnector()
{
Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal,
};
protected override void OnInitialized()
{
//Initializing node and connectors
NodeCollection = new ObservableCollection<DiagramNode>()
{ new DiagramNode(){Id="node1",Annotations = new ObservableCollection<DiagramNodeAnnotation>
(){new DiagramNodeAnnotation(){Content="Steve-Ceo"}}},
new DiagramNode(){Id="node2",Annotations = new ObservableCollection<DiagramNodeAnnotation>
(){new DiagramNodeAnnotation(){Content="Kevin-Manager"}}},
new DiagramNode(){Id="node3",Annotations = new ObservableCollection<DiagramNodeAnnotation>
(){new DiagramNodeAnnotation(){Content="Peter-Manager"}}},
};
ConnectorCollection = new ObservableCollection<DiagramConnector()
{
new DiagramConnector(){Id="connector1",SourceID="node1",TargetID="node2"},
new DiagramConnector(){Id="connector2",SourceID="node1",TargetID="node3"},
};
}
}
Constructors
DiagramLayout()
Represents the class to arrange the nodes and connectors in a tree structure.
Declaration
Properties
Arrangement
Child nodes will be arranged in linear way Or Non linear way in complex layout.
Declaration
public ChildArrangement Arrangement { get; set; }
Property Value
Bounds
Aligns the layout within the given bounds.
Declaration
public object Bounds { get; set; }
Property Value
Type |
Description |
System.Object |
|
ConnectionDirection
Specifies the Connection segment direction, by default it`s auto.
Declaration
public ConnectionDirection ConnectionDirection { get; set; }
Property Value
ConnectionPointOrigin
connect the connector to node without overlapping in automatic layout.
Declaration
public ConnectionPointOrigin ConnectionPointOrigin { get; set; }
Property Value
ConnectorSegments
Specifies whether the segments must be customized based on the layout or not.
Declaration
public ConnectorSegments ConnectorSegments { get; set; }
Property Value
EnableAnimation
Enables/Disables animation option when a node is expanded/collapsed.
Declaration
public bool EnableAnimation { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
Examples
protected override void OnInitialized()
{
LayoutValue = new DiagramLayout()
{
Type = LayoutType.HierarchicalTree,
VerticalSpacing = 30,
HorizontalSpacing = 30,
EnableAnimation = true,
LayoutInfo = this.LayoutInfo
};
}
EnableRouting
Enable / Disable connector routing for the layout.
Declaration
public bool EnableRouting { get; set; }
Property Value
Type |
Description |
System.Boolean |
|
FixedNode
Sets the name of the node concerning which all other nodes will be translated.
Declaration
public string FixedNode { get; set; }
Property Value
Type |
Description |
System.String |
|
HorizontalAlignment
Describes how the layout should be positioned or stretched in HorizontalAlignment.
Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
HorizontalSpacing
Specifies the space that must be horizontally left between the nodes. It is 30, by default.
Declaration
public double HorizontalSpacing { get; set; }
Property Value
Type |
Description |
System.Double |
|
LayoutInfo
Sets the layout properties using node property.
Declaration
public TreeInfo LayoutInfo { get; set; }
Property Value
Examples
TreeInfo LayoutInfo = new TreeInfo()
{
CanEnableSubTree = true,
Orientation = SubTreeOrientation.Horizontal
};
protected override void OnInitialized()
{
LayoutValue = new DiagramLayout()
{
Type = LayoutType.HierarchicalTree,
VerticalSpacing = 30,
HorizontalSpacing = 30,
EnableAnimation = true,
LayoutInfo = this.LayoutInfo
};
}
Margin
Specifies the space between the viewport and the layout. By default {left:50, top:50, right:0, bottom:0}.
Declaration
public LayoutMargin Margin { get; set; }
Property Value
Examples
DiagramLayout LayoutValue = new DiagramLayout()
{
Type = LayoutType.ComplexHierarchicalTree,
HorizontalSpacing = 40,
VerticalSpacing = 40,
Orientation = LayoutOrientation.TopToBottom,
Margin = new LayoutMargin() { Left = 20, Top = 20 },
};
MaxIteration
Sets the maximum no of iteration of the layout. It is 30, by default.
Declaration
public double MaxIteration { get; set; }
Property Value
Type |
Description |
System.Double |
|
Orientation
Specifies the orientation of the layout.
Declaration
public LayoutOrientation Orientation { get; set; }
Property Value
Root
Specifies the parent node of the layout.
Declaration
public string Root { get; set; }
Property Value
Type |
Description |
System.String |
|
SpringFactor
Specifies the edge attraction and vertex repulsion forces. More sibling nodes repel each other.
Declaration
public double SpringFactor { get; set; }
Property Value
Type |
Description |
System.Double |
|
SpringLength
Sets how long edges should be, ideally of the layout.
Declaration
public double SpringLength { get; set; }
Property Value
Type |
Description |
System.Double |
|
Type
This type property is used to define the type of the layout.
Declaration
public LayoutType Type { get; set; }
Property Value
VerticalAlignment
Describes how the layout should be positioned or stretched in VerticalAlignment.
Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
VerticalSpacing
Specifies the space that must be Vertically left between the nodes. It is 30, by default.
Declaration
public double VerticalSpacing { get; set; }
Property Value
Type |
Description |
System.Double |
|