Skip to content

Commit d6bfa5d

Browse files
shyamg1991shyamg1991
authored
Merge pull request #23 from RamyaSubramaniSF4537/984376-DiagramExamples
984376: Added example for diagram component
2 parents 113a407 + 7822b52 commit d6bfa5d

999 files changed

Lines changed: 65249 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Diagram/Server/App.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@namespace AlignBottom
2+
<Router AppAssembly="@typeof(App).Assembly">
3+
<Found Context="routeData">
4+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
5+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
6+
</Found>
7+
<NotFound>
8+
<PageTitle>Not found</PageTitle>
9+
<LayoutView Layout="@typeof(MainLayout)">
10+
<p role="alert">Sorry, there's nothing at this address.</p>
11+
</LayoutView>
12+
</NotFound>
13+
</Router>

‎Diagram/Server/Pages/Accessibility/KeyBoardNavigation.razor‎

Lines changed: 1008 additions & 0 deletions
Large diffs are not rendered by default.

‎Diagram/Server/Pages/Annotations/AddAnnotationAtRunTime.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/AddAnnotationAtRunTime"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
@using Syncfusion.Blazor.Buttons
5+
6+
<SfButton Content="Addlabel" OnClick="@AddLabel" />
7+
<SfDiagramComponent Height="600px" @ref="@diagram" Nodes="@nodes" />
8+
9+
@code
10+
{
11+
// Reference to diagram.
12+
private SfDiagramComponent diagram;
13+
// Defines diagram's node collection.
14+
private DiagramObjectCollection<Node> nodes;
15+
16+
protected override void OnInitialized()
17+
{
18+
nodes = new DiagramObjectCollection<Node>();
19+
Node node = new Node()
20+
{
21+
Width = 100,
22+
Height = 100,
23+
OffsetX = 100,
24+
OffsetY = 100,
25+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
26+
};
27+
nodes.Add(node);
28+
}
29+
30+
// Method to add annotation at runtime.
31+
private void AddLabel()
32+
{
33+
ShapeAnnotation annotation = new ShapeAnnotation { Content = "Annotation" };
34+
(diagram.Nodes[0].Annotations as DiagramObjectCollection<ShapeAnnotation>).Add(annotation);
35+
}
36+
}

‎Diagram/Server/Pages/Annotations/AddAsync.razor‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@page "/AddAsync"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
@using Syncfusion.Blazor.Buttons
5+
6+
<SfButton Content="Addlabel" OnClick="@AddLabel" />
7+
<SfDiagramComponent Height="600px" @ref="@diagram" Nodes="@nodes">
8+
</SfDiagramComponent>
9+
10+
@code
11+
{
12+
// Reference to diagram
13+
private SfDiagramComponent diagram;
14+
// Defines diagram's node collection
15+
private DiagramObjectCollection<Node> nodes;
16+
17+
protected override void OnInitialized()
18+
{
19+
// Intialize diagram's node collection
20+
nodes = new DiagramObjectCollection<Node>();
21+
Node node = new Node()
22+
{
23+
Width = 100,
24+
Height = 100,
25+
OffsetX = 100,
26+
OffsetY = 100,
27+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
28+
};
29+
nodes.Add(node);
30+
}
31+
32+
// Method to add labels at runtime
33+
private async void AddLabel()
34+
{
35+
ShapeAnnotation annotation = new ShapeAnnotation { Content = "Annotation" };
36+
await (diagram.Nodes[0].Annotations as DiagramObjectCollection<ShapeAnnotation>).AddAsync(annotation);
37+
}
38+
}

‎Diagram/Server/Pages/Annotations/AdditionalInfoProperty.razor‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@page "/AdditionalInfoProperty"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
7+
@code
8+
{
9+
private DiagramObjectCollection<Node> nodes;
10+
11+
protected override void OnInitialized()
12+
{
13+
nodes = new DiagramObjectCollection<Node>();
14+
// Create a dictionary to store additional information for the annotation.
15+
Dictionary<string, object> AnnotationInfo = new Dictionary<string, object>();
16+
AnnotationInfo.Add("author", "John Doe");
17+
AnnotationInfo.Add("modifiedDate", DateTime.Now);
18+
// A node with an annotation containing additional information.
19+
Node node = new Node()
20+
{
21+
OffsetX = 250,
22+
OffsetY = 250,
23+
Width = 100,
24+
Height = 100,
25+
Style = new ShapeStyle()
26+
{
27+
Fill = "#6BA5D7",
28+
StrokeColor = "white"
29+
},
30+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
31+
{
32+
new ShapeAnnotation
33+
{
34+
Content = "Annotated Node",
35+
AdditionalInfo = AnnotationInfo
36+
}
37+
}
38+
};
39+
// Add the node to the collection.
40+
nodes.Add(node);
41+
}
42+
}

‎Diagram/Server/Pages/Annotations/AlignmentOfConnectorAnnotation.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@page "/AlignmentOfConnectorAnnotation"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Connectors="@connectors" />
6+
7+
@code
8+
{
9+
//Defines diagram's connector collection.
10+
private DiagramObjectCollection<Connector> connectors;
11+
12+
protected override void OnInitialized()
13+
{
14+
connectors = new DiagramObjectCollection<Connector>();
15+
Connector connector = new Connector()
16+
{
17+
SourcePoint = new DiagramPoint() { X = 300, Y = 40 },
18+
TargetPoint = new DiagramPoint() { X = 400, Y = 160 },
19+
Type = ConnectorSegmentType.Orthogonal,
20+
Style = new TextStyle() { StrokeColor = "#6495ED" },
21+
Annotations = new DiagramObjectCollection<PathAnnotation>()
22+
{
23+
new PathAnnotation
24+
{
25+
Content = "Before",
26+
// Sets the alignment of the annotation as Before.
27+
Alignment = AnnotationAlignment.Before
28+
},
29+
new PathAnnotation
30+
{
31+
Content = "After",
32+
// Sets the alignment of the annotation as After.
33+
Alignment = AnnotationAlignment.After
34+
},
35+
}
36+
};
37+
connectors.Add(connector);
38+
}
39+
}

‎Diagram/Server/Pages/Annotations/AlignmentOfNodeAnnotation.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/AlignmentOfNodeAnnotation"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
7+
@code
8+
{
9+
// Defines diagram's node collection.
10+
private DiagramObjectCollection<Node> nodes;
11+
12+
protected override void OnInitialized()
13+
{
14+
nodes = new DiagramObjectCollection<Node>();
15+
Node node = new Node()
16+
{
17+
ID = "node1",
18+
Width = 100,
19+
Height = 100,
20+
OffsetX = 250,
21+
OffsetY = 250,
22+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
23+
{
24+
new ShapeAnnotation
25+
{
26+
Content = "Annotation",
27+
// Sets the HorizontalAlignment and VerticalAlignment for the content.
28+
HorizontalAlignment = HorizontalAlignment.Center,
29+
VerticalAlignment = VerticalAlignment.Center
30+
}
31+
},
32+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
33+
};
34+
nodes.Add(node);
35+
}
36+
}

‎Diagram/Server/Pages/Annotations/AnnotationOfNodeAlignText.razor‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@page "/AnnotationOfNodeAlignText"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
7+
@code
8+
{
9+
// Defines diagram's node collection.
10+
private DiagramObjectCollection<Node> nodes;
11+
12+
protected override void OnInitialized()
13+
{
14+
nodes = new DiagramObjectCollection<Node>();
15+
Node node = new Node()
16+
{
17+
ID = "node1",
18+
Width = 100,
19+
Height = 100,
20+
OffsetX = 100,
21+
OffsetY = 100,
22+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
23+
{
24+
new ShapeAnnotation
25+
{
26+
Content = "Text align is set as Left",
27+
Style = new TextStyle()
28+
{
29+
// Sets the textAlign as left for the content.
30+
TextAlign = TextAlign.Left
31+
}
32+
}
33+
},
34+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
35+
};
36+
nodes.Add(node);
37+
}
38+
}

‎Diagram/Server/Pages/Annotations/AnnotationStyleAtRunTime.razor‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@page "/AnnotationStyleAtRunTime"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
@using Syncfusion.Blazor.Buttons
5+
6+
<SfButton Content="UpdateStyle" OnClick="@UpdateStyle" />
7+
<SfDiagramComponent @ref="@Diagram" Height="600px" Nodes="@nodes" />
8+
9+
@code
10+
{
11+
// Reference of the diagram.
12+
private SfDiagramComponent Diagram;
13+
// Defines diagram's node collection.
14+
private DiagramObjectCollection<Node> nodes;
15+
16+
protected override void OnInitialized()
17+
{
18+
nodes = new DiagramObjectCollection<Node>();
19+
Node node = new Node()
20+
{
21+
ID = "node1",
22+
Width = 100,
23+
Height = 100,
24+
OffsetX = 100,
25+
OffsetY = 100,
26+
// Sets the annotation for the node.
27+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
28+
{
29+
new ShapeAnnotation
30+
{
31+
Content = "Annotation Text",
32+
Style = new TextStyle()
33+
{
34+
Color = "black",
35+
Bold = true,
36+
Italic = true,
37+
TextDecoration = TextDecoration.Underline,
38+
FontSize = 12,
39+
FontFamily = "TimesNewRoman"
40+
}
41+
}
42+
},
43+
Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
44+
};
45+
nodes.Add(node);
46+
}
47+
48+
private void UpdateStyle()
49+
{
50+
// Change the style of the annotation.
51+
Diagram.BeginUpdate();
52+
Diagram.Nodes[0].Annotations[0].Style.Bold = false;
53+
Diagram.Nodes[0].Annotations[0].Style.TextDecoration = TextDecoration.None;
54+
Diagram.Nodes[0].Annotations[0].Style.Color = "Red";
55+
Diagram.EndUpdateAsync();
56+
}
57+
}

‎Diagram/Server/Pages/Annotations/AnnotationWithTextOverflow.razor‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@page "/AnnotationWithTextOverflow"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
7+
@code
8+
{
9+
// Defines diagram's node collection.
10+
private DiagramObjectCollection<Node> nodes;
11+
12+
protected override void OnInitialized()
13+
{
14+
nodes = new DiagramObjectCollection<Node>();
15+
Node node = new Node()
16+
{
17+
ID = "node",
18+
Width = 100,
19+
Height = 100,
20+
OffsetX = 100,
21+
OffsetY = 100,
22+
// Sets the style for the text to be displayed.
23+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
24+
{
25+
new ShapeAnnotation
26+
{
27+
Content = "The text element with property of overflow as Wrap and wrapping as NoWrap",
28+
Style = new TextStyle()
29+
{
30+
// Sets the text overflow of the annotation as Wrap.
31+
TextOverflow = TextOverflow.Wrap,
32+
TextWrapping = TextWrap.NoWrap
33+
}
34+
},
35+
},
36+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
37+
};
38+
nodes.Add(node);
39+
}
40+
}

0 commit comments

Comments
 (0)