Skip to content

Commit 8cee6ab

Browse files
KarkuvelRajanKarkuvelRajan
authored
Merge pull request #39 from RamyaSubramaniSF4537/1007133-UG
1007133: Updated the sample
2 parents c36e8fd + 74ea036 commit 8cee6ab

22 files changed

Lines changed: 247 additions & 73 deletions

‎Diagram/Server/Pages/BpmnEditor/BpmnShape/BpmnShape.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
77

88
@code
99
{
1010
// Initialize node collection with Node.
11-
private DiagramObjectCollection<Node> nodes;
11+
private DiagramObjectCollection<Node> _nodes;
1212

1313
protected override void OnInitialized()
1414
{
15-
nodes = new DiagramObjectCollection<Node>();
15+
_nodes = new DiagramObjectCollection<Node>();
1616
Node node = new Node()
1717
{
1818
// Position of the node.
@@ -29,6 +29,6 @@
2929
ActivityType = BpmnActivityType.Task
3030
},
3131
};
32-
nodes.Add(node);
32+
_nodes.Add(node);
3333
}
3434
}

‎Diagram/Server/Pages/Shapes/BPMNShapeSample.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
77

88
@code
99
{
1010
// Initialize node collection with Node.
11-
private DiagramObjectCollection<Node> nodes;
11+
private DiagramObjectCollection<Node> _nodes;
1212

1313
protected override void OnInitialized()
1414
{
15-
nodes = new DiagramObjectCollection<Node>();
15+
_nodes = new DiagramObjectCollection<Node>();
1616
Node node = new Node()
1717
{
1818
// Position of the node.
@@ -29,6 +29,6 @@
2929
ActivityType = BpmnActivityType.Task
3030
},
3131
};
32-
nodes.Add(node);
32+
_nodes.Add(node);
3333
}
3434
}

‎Diagram/Server/Pages/Shapes/Base64image.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes"></SfDiagramComponent>
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes"></SfDiagramComponent>
77

88
@code
99
{
1010
//Initialize node collection with node
11-
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
11+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
1212

1313
protected override void OnInitialized()
1414
{
@@ -29,6 +29,6 @@
2929
},
3030
Style = new ShapeStyle() { StrokeColor = "White" }
3131
};
32-
nodes.Add(node);
32+
_nodes.Add(node);
3333
}
3434
}

‎Diagram/Server/Pages/Shapes/BasicShapeSample.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
77

88
@code
99
{
1010
//Initialize node collection with node
11-
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
11+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
1212

1313
protected override void OnInitialized()
1414
{
@@ -25,6 +25,6 @@
2525
Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 10 },
2626
Style = new ShapeStyle() { Fill = "#6495ED" }
2727
};
28-
nodes.Add(node);
28+
_nodes.Add(node);
2929
}
3030
}

‎Diagram/Server/Pages/Shapes/FlowShapeSample.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
77

88
@code
99
{
1010
//Initialize node collection with node
11-
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
11+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
1212

1313
protected override void OnInitialized()
1414
{
@@ -28,6 +28,6 @@
2828
Shape = NodeFlowShapes.DirectData
2929
}
3030
};
31-
nodes.Add(node);
31+
_nodes.Add(node);
3232
}
3333
}

‎Diagram/Server/Pages/Shapes/HTMLShape.razor‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@page "/HTMLShape"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
@* Add a Namespace for a Syncfusion<sup style="font-size:70%">&reg;</sup> control used in Diagrm HTML node *@
6+
@using Syncfusion.Blazor.CircularGauge
7+
8+
@* Initialize Diagram with node template *@
9+
<SfDiagramComponent Height="600px" Nodes="@_nodes">
10+
<DiagramTemplates>
11+
<NodeTemplate>
12+
@{
13+
<SfCircularGauge Width="300px" Height="300px">
14+
<CircularGaugeAxes>
15+
<CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="120" Radius="80%">
16+
<CircularGaugeAxisLineStyle Width="10" Color="transparent">
17+
</CircularGaugeAxisLineStyle>
18+
<CircularGaugeAxisLabelStyle UseRangeColor="false">
19+
<CircularGaugeAxisLabelFont Size="12px" FontFamily="Roboto" FontStyle="Regular">
20+
</CircularGaugeAxisLabelFont>
21+
</CircularGaugeAxisLabelStyle>
22+
<CircularGaugeAxisMajorTicks Height="10" Offset="5" UseRangeColor="false">
23+
</CircularGaugeAxisMajorTicks>
24+
<CircularGaugeAxisMinorTicks Height="0" Width="0" UseRangeColor="false">
25+
</CircularGaugeAxisMinorTicks>
26+
<CircularGaugeAnnotations>
27+
<CircularGaugeAnnotation Radius="30%" Angle="0" ZIndex="1" Content="Speedometer">
28+
<ContentTemplate>
29+
<div><span style="font-size:14px; color:#9E9E9E; font-family:Regular; margin-left: -33px">Speedometer</span></div>
30+
</ContentTemplate>
31+
</CircularGaugeAnnotation>
32+
<CircularGaugeAnnotation Radius="40%" Angle="180" ZIndex="1" Content="65 MPH">
33+
<ContentTemplate>
34+
<div><span style="font-size:20px; color:#424242; font-family:Regular; margin-left: -33px">65 MPH</span></div>
35+
</ContentTemplate>
36+
</CircularGaugeAnnotation>
37+
</CircularGaugeAnnotations>
38+
<CircularGaugeRanges>
39+
<CircularGaugeRange Start="0" End="40" Color="#30B32D" StartWidth="10" EndWidth="10" RoundedCornerRadius="0">
40+
</CircularGaugeRange>
41+
<CircularGaugeRange Start="40" End="80" Color="#FFDD00" StartWidth="10" EndWidth="10" RoundedCornerRadius="0">
42+
</CircularGaugeRange>
43+
<CircularGaugeRange Start="80" End="120" Color="#F03E3E" StartWidth="10" EndWidth="10" RoundedCornerRadius="0">
44+
</CircularGaugeRange>
45+
</CircularGaugeRanges>
46+
<CircularGaugePointers>
47+
<CircularGaugePointer Value="65" Radius="60%" PointerWidth="8">
48+
<CircularGaugePointerAnimation Enable="true"></CircularGaugePointerAnimation>
49+
<CircularGaugeCap Radius="7">
50+
</CircularGaugeCap>
51+
<CircularGaugeNeedleTail Length="18%">
52+
</CircularGaugeNeedleTail>
53+
</CircularGaugePointer>
54+
</CircularGaugePointers>
55+
</CircularGaugeAxis>
56+
</CircularGaugeAxes>
57+
</SfCircularGauge>
58+
}
59+
</NodeTemplate>
60+
</DiagramTemplates>
61+
</SfDiagramComponent>
62+
63+
@code
64+
{
65+
//Initialize node collection with node
66+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
67+
68+
protected override void OnInitialized()
69+
{
70+
Node node = new Node()
71+
{
72+
ID = "node1",
73+
//Size of the node
74+
Width = 300,
75+
Height = 300,
76+
//Position of the node
77+
OffsetX = 400,
78+
OffsetY = 300,
79+
//sets the type of the shape as HTML
80+
Shape = new Shape()
81+
{
82+
Type = NodeShapes.HTML,
83+
}
84+
};
85+
_nodes.Add(node);
86+
}
87+
}

‎Diagram/Server/Pages/Shapes/ImageAlign.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
77

88
@code
99
{
1010
//Reference the diagram
11-
private SfDiagramComponent diagram;
11+
private SfDiagramComponent _diagram;
1212
//Intialize diagram's nodes collection
13-
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
13+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
1414

1515
protected override void OnInitialized()
1616
{
@@ -26,11 +26,11 @@
2626
Shape = new ImageShape()
2727
{
2828
Type = NodeShapes.Image,
29-
Source = "/diagram/images/productmanager.png",
29+
Source = "https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Image.png",
3030
Scale = DiagramScale.Meet,
3131
ImageAlign = ImageAlignment.XMinYMax
3232
}
3333
};
34-
nodes.Add(node);
34+
_nodes.Add(node);
3535
}
3636
}

‎Diagram/Server/Pages/Shapes/ImageShapeSample.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes" />
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes" />
77

88
@code
99
{
10-
private SfDiagramComponent diagram;
11-
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
10+
private SfDiagramComponent _diagram;
11+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
1212

1313
protected override void OnInitialized()
1414
{
@@ -24,9 +24,9 @@
2424
Shape = new ImageShape()
2525
{
2626
Type = NodeShapes.Image,
27-
Source = "/diagram/images/productmanager.png"
27+
Source = "https://cdn.syncfusion.com/content/images/company-logos/Syncfusion_Logo_Image.png"
2828
}
2929
};
30-
nodes.Add(node);
30+
_nodes.Add(node);
3131
}
3232
}

‎Diagram/Server/Pages/Shapes/PathShapeSample.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@NodeCollection">
6+
<SfDiagramComponent Height="600px" Nodes="@_nodeCollection">
77
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
88
</SfDiagramComponent>
99

1010
@code
1111
{
1212
//Initialize node collection with node
13-
private DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>()
13+
private DiagramObjectCollection<Node> _nodeCollection = new DiagramObjectCollection<Node>()
1414
{
1515
// Creates a path node
1616
new Node()

‎Diagram/Server/Pages/Shapes/SVGShape.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@using Syncfusion.Blazor.Diagram
44

55
@* Initialize Diagram *@
6-
<SfDiagramComponent Height="600px" Nodes="@nodes">
6+
<SfDiagramComponent Height="600px" Nodes="@_nodes">
77
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
88
<DiagramTemplates>
99
<NodeTemplate>
@@ -18,15 +18,15 @@
1818
</g>
1919
</svg>
2020
}
21-
}
21+
}
2222
</NodeTemplate>
2323
</DiagramTemplates>
2424
</SfDiagramComponent>
2525

2626
@code
2727
{
2828
//Initialize node collection with node
29-
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
29+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
3030

3131
protected override void OnInitialized()
3232
{
@@ -42,6 +42,6 @@
4242
//Sets type of the shape as Native
4343
Shape = new Shape() { Type = NodeShapes.SVG },
4444
};
45-
nodes.Add(node);
45+
_nodes.Add(node);
4646
}
4747
}

0 commit comments

Comments
 (0)