Class DiagramLayout

Represents the class to arrange the nodes and connectors in a tree structure.

Inheritance
System.Object
SfDiagramBase
DiagramLayout
Inherited Members
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramLayout : SfDiagramBase
Remarks
There are various layout modes available for user`s, they are as follows
1. Hierarchical layout
2. Organization chart
3. Mind Map layout
4. Radial tree
5. Symmetric layout
6. Complex hierarchical tree layout
The following code demonstrates, how to define the Hierarchical layout and its properties.
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
public DiagramLayout()

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
Type Description
ChildArrangement

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
Type Description
ConnectionDirection
Remarks
The following list shows the ConnectionDirection types.
1. Auto - Defines the first segment direction based on the type of layout
2. Orientation - Defines the first segment direction based on the orientation of the layout.
3. Custom - Defines the first segment direction dynamically by the user.

ConnectionPointOrigin

connect the connector to node without overlapping in automatic layout.

Declaration
public ConnectionPointOrigin ConnectionPointOrigin { get; set; }
Property Value
Type Description
ConnectionPointOrigin

ConnectorSegments

Specifies whether the segments must be customized based on the layout or not.

Declaration
public ConnectorSegments ConnectorSegments { get; set; }
Property Value
Type Description
ConnectorSegments
Remarks
The following list shows the ConnectionSegments types.
1. Default - Routes the connectors like a default diagram.
2. Layout - Routes the connectors based on the type of the layout.

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
 };
}

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
Type Description
HorizontalAlignment

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
Type Description
TreeInfo
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
Type Description
LayoutMargin
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
Type Description
LayoutOrientation

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
Type Description
LayoutType

VerticalAlignment

Describes how the layout should be positioned or stretched in VerticalAlignment.

Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type Description
VerticalAlignment

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