Skip to content

Commit def07ed

Browse files
KarkuvelRajanKarkuvelRajan
authored
Merge pull request #50 from SriRam4552/1007315-ForceDirected
1007315: Force Directed layout and Hierarchical layout
2 parents 1e4e3c5 + 717fea3 commit def07ed

18 files changed

Lines changed: 956 additions & 442 deletions

‎Diagram/Server/Pages/Layout/DataLoadedEvent.razor‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,28 @@
22

33
@using Syncfusion.Blazor.Diagram
44

5-
<SfDiagramComponent @ref="_diagram" Width="100%" Height="600px" DataLoaded="@DataLoaded" NodeCreating="NodeCreating" ConnectorCreating="ConnectorCreating">
6-
<DataSourceSettings DataSource="@_dataSource" ID="Id" ParentID="Manager"></DataSourceSettings>
7-
<Layout @bind-Type="_type" @bind-HorizontalSpacing="@_horizontalSpacing" @bind-FixedNode="@_fixedNode" @bind-Orientation="@_orientation" @bind-VerticalSpacing="@_verticalSpacing" @bind-HorizontalAlignment="@_horizontalAlignment" @bind-VerticalAlignment="@_verticalAlignment">
8-
<LayoutMargin @bind-Top="@_top" @bind-Bottom="@_bottom" @bind-Right="@_right" @bind-Left="@_left"></LayoutMargin>
5+
<SfDiagramComponent @ref="diagram" Width="100%" Height="600px" DataLoaded="@DataLoaded" NodeCreating="NodeCreating" ConnectorCreating="ConnectorCreating">
6+
<DataSourceSettings DataSource="DataSource" ID="Id" ParentID="Manager"></DataSourceSettings>
7+
<Layout @bind-Type="type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-FixedNode="@FixedNode" @bind-Orientation="@oreintation" @bind-VerticalSpacing="@VerticalSpacing" @bind-HorizontalAlignment="@horizontalAlignment" @bind-VerticalAlignment="@verticalAlignment">
8+
<LayoutMargin @bind-Top="@top" @bind-Bottom="@bottom" @bind-Right="@right" @bind-Left="@left"></LayoutMargin>
99
</Layout>
1010
<SnapSettings></SnapSettings>
1111
</SfDiagramComponent>
1212

1313
@code
1414
{
15-
private SfDiagramComponent? _diagram;
16-
private double _top = 50;
17-
private double _bottom = 50;
18-
private double _right = 50;
19-
private double _left = 50;
20-
private LayoutType _type = LayoutType.OrganizationalChart;
21-
private LayoutOrientation _orientation = LayoutOrientation.TopToBottom;
22-
private HorizontalAlignment _horizontalAlignment = HorizontalAlignment.Auto;
23-
private VerticalAlignment _verticalAlignment = VerticalAlignment.Auto;
24-
private int _horizontalSpacing = 30;
25-
private int _verticalSpacing = 30;
26-
private string? _fixedNode = null;
15+
private SfDiagramComponent diagram;
16+
private double top = 50;
17+
private double bottom = 50;
18+
private double right = 50;
19+
private double left = 50;
20+
private LayoutType type = LayoutType.OrganizationalChart;
21+
private LayoutOrientation oreintation = LayoutOrientation.TopToBottom;
22+
private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto;
23+
private VerticalAlignment verticalAlignment = VerticalAlignment.Auto;
24+
private int HorizontalSpacing = 30;
25+
private int VerticalSpacing = 30;
26+
private string FixedNode = null;
2727

2828
public class HierarchicalDetails
2929
{
@@ -34,27 +34,27 @@
3434
public string Color { get; set; }
3535
}
3636

37-
private List<HierarchicalDetails> _dataSource = new List<HierarchicalDetails>()
37+
public List<HierarchicalDetails> DataSource = new List<HierarchicalDetails>()
3838
{
39-
new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" },
40-
new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" },
41-
new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" },
42-
new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
43-
new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" },
44-
new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" },
45-
new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" },
46-
new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" },
47-
new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" },
48-
new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" },
49-
new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" },
50-
new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
51-
new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" },
52-
new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" },
53-
new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
54-
new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" },
55-
new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" },
56-
new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" },
57-
new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" }
39+
new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" },
40+
new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" },
41+
new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" },
42+
new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
43+
new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" },
44+
new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" },
45+
new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" },
46+
new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" },
47+
new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" },
48+
new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" },
49+
new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" },
50+
new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
51+
new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" },
52+
new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" },
53+
new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
54+
new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" },
55+
new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" },
56+
new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" },
57+
new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" }
5858
};
5959

6060
private void NodeCreating(IDiagramObject obj)

‎Diagram/Server/Pages/Layout/FlowchartLayout/CustomYesOrNoBranch.razor‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,31 @@
22

33
@using Syncfusion.Blazor.Diagram
44

5-
<SfDiagramComponent @ref="_diagram" Width="100%" Height="700px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating" DataLoaded="@OnDataLoaded">
6-
<DataSourceSettings ID="Id" ParentID="ParentId" DataSource="@_dataSource"> </DataSourceSettings>
7-
<Layout Type="LayoutType.Flowchart" HorizontalSpacing="50" Orientation="LayoutOrientation.TopToBottom" VerticalSpacing="50" FlowchartLayoutSettings="@_flowchartSettings">
5+
<SfDiagramComponent @ref="Diagram" Width="100%" Height="700px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating" DataLoaded="@OnDataLoaded">
6+
<DataSourceSettings ID="Id" ParentID="ParentId" DataSource="DataSource"> </DataSourceSettings>
7+
<Layout Type="LayoutType.Flowchart" HorizontalSpacing="50" Orientation="LayoutOrientation.TopToBottom" VerticalSpacing="50" FlowchartLayoutSettings="@flowchartSettings">
88
</Layout>
99
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
1010
</SfDiagramComponent>
1111

1212
@code
1313
{
1414
//Initialize diagram component.
15-
private SfDiagramComponent? _diagram;
15+
private SfDiagramComponent Diagram;
1616
//Initialize flowchart layout settings.
17-
private FlowchartLayoutSettings _flowchartSettings = new FlowchartLayoutSettings()
17+
private FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings()
1818
{
1919
YesBranchValues = new List<string> { "Accept", "Yes" },
2020
NoBranchValues = new List<string> { "Reject", "No" },
2121
};
2222

2323
private void OnDataLoaded(object obj)
2424
{
25-
for (int i = 0; i < _diagram.Connectors.Count; i++)
25+
for (int i = 0; i < Diagram.Connectors.Count; i++)
2626
{
27-
Connector connector = _diagram.Connectors[i];
28-
Node node = _diagram.GetObject(connector.TargetID) as Node;
29-
Node srcNode = _diagram.GetObject(connector.SourceID) as Node;
27+
Connector connector = Diagram.Connectors[i];
28+
Node node = Diagram.GetObject(connector.TargetID) as Node;
29+
Node srcNode = Diagram.GetObject(connector.SourceID) as Node;
3030
if (node.Data != null && node.Data is ItemInfo itemInfo)
3131
{
3232
if (itemInfo.Label != null && itemInfo.Label.Count > 0)
@@ -85,7 +85,7 @@
8585
}
8686
}
8787
//Initialize data source collection.
88-
private List<ItemInfo> _dataSource = new List<ItemInfo>()
88+
public List<ItemInfo> DataSource = new List<ItemInfo>()
8989
{
9090
new ItemInfo()
9191
{

‎Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayout.razor‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,31 @@
22

33
@using Syncfusion.Blazor.Diagram
44

5-
<SfDiagramComponent @ref="_diagram" Width="100%" Height="700px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating" DataLoaded="@OnDataLoaded">
6-
<DataSourceSettings ID="Id" ParentID="ParentId" DataSource="@_dataSource"> </DataSourceSettings>
7-
<Layout Type="LayoutType.Flowchart" HorizontalSpacing="50" Orientation="LayoutOrientation.TopToBottom" VerticalSpacing="50" FlowchartLayoutSettings="@_flowchartSettings">
5+
<SfDiagramComponent @ref="Diagram" Width="100%" Height="700px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating" DataLoaded="@OnDataLoaded">
6+
<DataSourceSettings ID="Id" ParentID="ParentId" DataSource="DataSource"> </DataSourceSettings>
7+
<Layout Type="LayoutType.Flowchart" HorizontalSpacing="50" Orientation="LayoutOrientation.TopToBottom" VerticalSpacing="50" FlowchartLayoutSettings="@flowchartSettings">
88
</Layout>
99
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
1010
</SfDiagramComponent>
1111

1212
@code
13-
{
13+
{
1414
//Initialize diagram component.
15-
private SfDiagramComponent? _diagram;
15+
private SfDiagramComponent Diagram;
1616
//Initialize flowchart layout settings.
17-
private FlowchartLayoutSettings _flowchartSettings = new FlowchartLayoutSettings()
17+
private FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings()
1818
{
1919
YesBranchDirection = BranchDirection.LeftInFlow,
2020
NoBranchDirection = BranchDirection.RightInFlow
2121
};
2222

2323
private void OnDataLoaded(object obj)
2424
{
25-
for (int i = 0; i < _diagram.Connectors.Count; i++)
25+
for (int i = 0; i < Diagram.Connectors.Count; i++)
2626
{
27-
Connector connector = _diagram.Connectors[i];
28-
Node node = _diagram.GetObject(connector.TargetID) as Node;
29-
Node srcNode = _diagram.GetObject(connector.SourceID) as Node;
27+
Connector connector = Diagram.Connectors[i];
28+
Node node = Diagram.GetObject(connector.TargetID) as Node;
29+
Node srcNode = Diagram.GetObject(connector.SourceID) as Node;
3030
if (node.Data != null && node.Data is ItemInfo itemInfo)
3131
{
3232
if (itemInfo.Label != null && itemInfo.Label.Count > 0)
@@ -83,7 +83,7 @@
8383
}
8484
}
8585
//Initialize data source collection.
86-
private List<ItemInfo> _dataSource = new List<ItemInfo>(){
86+
public List<ItemInfo> DataSource = new List<ItemInfo>(){
8787
new ItemInfo()
8888
{
8989
Id = "1",

‎Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutForGmail.razor‎

Lines changed: 17 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
@using Syncfusion.Blazor.Diagram
44
@using System.Collections.ObjectModel
55

6-
<SfDiagramComponent @ref="_diagram" Width="100%" Height="900px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating" DataLoaded="@OnDataLoaded">
7-
<DataSourceSettings ID="Id" ParentID="ParentId" DataSource="@_dataSource"> </DataSourceSettings>
8-
<Layout @bind-Type="@_type" @bind-HorizontalSpacing="@_horizontalSpacing" @bind-Orientation="@_orientationType" @bind-VerticalSpacing="@_verticalSpacing" FlowchartLayoutSettings="@_flowchartSettings">
6+
<SfDiagramComponent @ref="Diagram" Width="100%" Height="900px" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating" DataLoaded="@OnDataLoaded">
7+
<DataSourceSettings ID="Id" ParentID="ParentId" DataSource="DataSource"> </DataSourceSettings>
8+
<Layout @bind-Type="@Type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-Orientation="@OrientationType" @bind-VerticalSpacing="@VerticalSpacing" FlowchartLayoutSettings="@flowchartSettings">
99
</Layout>
1010
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
1111
</SfDiagramComponent>
1212

1313
@code
1414
{
15-
private SfDiagramComponent? _diagram;
16-
private FlowchartLayoutSettings _flowchartSettings = new FlowchartLayoutSettings()
15+
FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings()
1716
{
1817
//Set the decision yes branch direction
1918
YesBranchDirection = BranchDirection.LeftInFlow,
@@ -24,20 +23,21 @@
2423
//Set the custom no branch values
2524
NoBranchValues = new List<string> { "No", "New" },
2625
};
27-
private int? _hValue { get; set; } = 60;
28-
private int? _vValue { get; set; } = 40;
29-
private LayoutType _type = LayoutType.Flowchart;
30-
private LayoutOrientation _orientationType = LayoutOrientation.TopToBottom;
31-
private int _horizontalSpacing = 50;
32-
private int _verticalSpacing = 50;
33-
26+
private SfDiagramComponent Diagram;
27+
private int? HValue { get; set; } = 60;
28+
private int? VValue { get; set; } = 40;
29+
private LayoutType Type = LayoutType.Flowchart;
30+
private LayoutOrientation OrientationType = LayoutOrientation.TopToBottom;
31+
private int HorizontalSpacing = 50;
32+
private int VerticalSpacing = 50;
33+
3434
private void OnDataLoaded(object obj)
3535
{
36-
for (int i = 0; i < _diagram.Connectors.Count; i++)
36+
for (int i = 0; i < Diagram.Connectors.Count; i++)
3737
{
38-
Connector connector = _diagram.Connectors[i];
39-
Node node = _diagram.GetObject(connector.TargetID) as Node;
40-
Node srcNode = _diagram.GetObject(connector.SourceID) as Node;
38+
Connector connector = Diagram.Connectors[i];
39+
Node node = Diagram.GetObject(connector.TargetID) as Node;
40+
Node srcNode = Diagram.GetObject(connector.SourceID) as Node;
4141
if (node.Data != null && node.Data is NodeInfo NodeInfo)
4242
{
4343
if (NodeInfo.LineText != null && NodeInfo.LineText.Count > 0)
@@ -93,7 +93,7 @@
9393
}
9494
}
9595

96-
private List<NodeInfo> _dataSource = new List<NodeInfo>()
96+
public List<NodeInfo> DataSource = new List<NodeInfo>()
9797
{
9898
new NodeInfo() { Id = "1", Description = "Start", Shape = "StartOrEnd", Width = 100, Height = 30, Color = "#8E44CC" },
9999
new NodeInfo() { Id = "2", Description = "Open Gmail site in browser", ParentId = new List<string> { "1" }, Shape = "Rectangle", Width = 120, Height = 50, Color = "#1759B7" },
@@ -122,53 +122,4 @@
122122
public double Height { get; set; }
123123
public string Color { get; set; }
124124
}
125-
126-
private void OrientationTypeChange(ChangeEventArgs<string, Orientationvalue> args)
127-
{
128-
_orientationType = args.ItemData.Value == "Vertical" ? LayoutOrientation.TopToBottom : LayoutOrientation.LeftToRight;
129-
}
130-
131-
private void YesBranchDirectionChange(ChangeEventArgs<string, BranchDirectionvalue> args)
132-
{
133-
if (args.ItemData.Text == "same")
134-
{
135-
_flowchartSettings.YesBranchDirection = BranchDirection.SameAsFlow;
136-
}
137-
if (args.ItemData.Text == "left")
138-
{
139-
_flowchartSettings.YesBranchDirection = BranchDirection.LeftInFlow;
140-
}
141-
if (args.ItemData.Text == "right")
142-
{
143-
_flowchartSettings.YesBranchDirection = BranchDirection.RightInFlow;
144-
}
145-
}
146-
147-
private void NoBranchDirectionChange(ChangeEventArgs<string, BranchDirectionvalue1> args)
148-
{
149-
if (args.ItemData.Text == "same")
150-
{
151-
_flowchartSettings.NoBranchDirection = BranchDirection.SameAsFlow;
152-
}
153-
if (args.ItemData.Text == "left")
154-
{
155-
_flowchartSettings.NoBranchDirection = BranchDirection.LeftInFlow;
156-
}
157-
if (args.ItemData.Text == "right")
158-
{
159-
_flowchartSettings.NoBranchDirection = BranchDirection.RightInFlow;
160-
}
161-
}
162-
163-
private void OnHorizontalSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<int> args)
164-
{
165-
int val = Convert.ToInt32(args.Value);
166-
_horizontalSpacing = val;
167-
}
168-
169-
private void OnVerticalSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<int> args)
170-
{
171-
int val = Convert.ToInt32(args.Value);
172-
_verticalSpacing = val;
173-
}
174125
}

0 commit comments

Comments
 (0)