Skip to content

Commit a88d924

Browse files
1007098: Code standard validation for code example
1 parent bb921c9 commit a88d924

28 files changed

Lines changed: 748 additions & 443 deletions

Diagram/Server/Pages/UserHandle/ConnectorFixedUserHandleSample.razor

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

33
@using Syncfusion.Blazor.Diagram
44

5-
<SfDiagramComponent Height="600px" Connectors="@connectors">
5+
<SfDiagramComponent Height="600px" Connectors="@_connectors">
66
<SnapSettings>
77
<HorizontalGridLines LineColor="White" LineDashArray="2,2" />
88
<VerticalGridLines LineColor="White" LineDashArray="2,2" />
@@ -11,11 +11,11 @@
1111

1212
@code
1313
{
14-
//Intialize diagram's connectors collection
15-
private DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
14+
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
1615

1716
protected override void OnInitialized()
1817
{
18+
_connectors = new DiagramObjectCollection<Connector>();
1919
Connector connector = new Connector()
2020
{
2121
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
@@ -38,6 +38,6 @@
3838
}
3939
},
4040
};
41-
connectors.Add(connector);
41+
_connectors.Add(connector);
4242
}
4343
}

Diagram/Server/Pages/UserHandle/CustomizeFixedUserHandle.razor

Lines changed: 27 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,80 +2,69 @@
22

33
@using Syncfusion.Blazor.Diagram
44

5-
<SfDiagramComponent Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
5+
<SfDiagramComponent @ref="_diagram" Height="600px" Nodes="@_nodes" Connectors="@_connectors">
66
<DiagramTemplates>
77
<FixedUserHandleTemplate>
8-
@{
9-
if ((context as FixedUserHandle).ID == "user2" || (context as FixedUserHandle).ID == "user3")
10-
{
11-
<div id="button" style="height: 100%; width: 100%;">
12-
<input type="button" value="Button1" @onclick="OnChange" />
13-
</div>
14-
}
8+
@if ((context as FixedUserHandle).ID == "user1" || (context as FixedUserHandle).ID == "user2")
9+
{
10+
<div id="button" style="height: 100%; width: 100%;">
11+
<input type="button" value="Button1" />
12+
</div>
1513
}
1614
</FixedUserHandleTemplate>
1715
</DiagramTemplates>
1816
</SfDiagramComponent>
19-
2017
@code
2118
{
22-
//Defines diagram's connector collection
23-
private DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
24-
//Defines diagram's node collection
25-
private DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
26-
19+
private SfDiagramComponent _diagram;
20+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
21+
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
2722
protected override void OnInitialized()
2823
{
29-
NodeCollection = new DiagramObjectCollection<Node>();
30-
Node node = new Node()
24+
Node node1 = new Node()
3125
{
26+
ID = "node1",
27+
OffsetX = 250,
28+
OffsetY = 250,
3229
Width = 100,
3330
Height = 100,
34-
OffsetX = 100,
35-
OffsetY = 100,
3631
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
3732
// A fixed user handle is created and stored in fixed user handle collection of Node.
3833
FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
3934
{
4035
new NodeFixedUserHandle()
4136
{
42-
ID = "user2",
37+
ID = "user1",
4338
Height = 30,
4439
Width = 30,
4540
Visibility = true,
4641
Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 },
47-
Margin = new DiagramThickness() { Left = 30 }, Offset = new DiagramPoint() { X = 1 , Y = 0 },
48-
},
42+
Margin = new DiagramThickness() { Left = 30 }, Offset = new DiagramPoint() { X = 1 , Y = 0 }
43+
},
4944
}
5045
};
51-
NodeCollection.Add(node);
52-
ConnectorCollection = new DiagramObjectCollection<Connector>();
53-
Connector connector = new Connector()
46+
_nodes.Add(node1);
47+
Connector connector = new Connector
5448
{
55-
SourcePoint = new DiagramPoint() { X = 300, Y = 40 },
56-
TargetPoint = new DiagramPoint() { X = 400, Y = 160 },
49+
ID = "connector1",
5750
Type = ConnectorSegmentType.Orthogonal,
58-
Style = new ShapeStyle() { StrokeColor = "#6495ED" },
51+
SourcePoint = new DiagramPoint() { X = 600, Y = 200 },
52+
TargetPoint = new DiagramPoint() { X = 800, Y = 400 },
5953
// A fixed user handle is created and stored in fixed user handle collection of Connector.
60-
FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
61-
{
62-
new ConnectorFixedUserHandle()
54+
FixedUserHandles = new DiagramObjectCollection<ConnectorFixedUserHandle>()
55+
{
56+
new ConnectorFixedUserHandle()
6357
{
64-
ID="user3",
58+
ID="user2",
6559
Offset = 1,
6660
Alignment = FixedUserHandleAlignment.After,
6761
Displacement = new DiagramPoint() { X = 10},
6862
Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 },
6963
Width = 30,
7064
Height = 30,
71-
},
65+
}
7266
}
7367
};
74-
ConnectorCollection.Add(connector);
75-
}
76-
77-
private void OnChange()
78-
{
79-
NodeCollection[0].Style = new ShapeStyle() { Fill = "Green" };
68+
_connectors.Add(connector);
8069
}
8170
}
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@page "/CustomizeUserHandleImage"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent @ref="_diagram" Width="1200px" Height="600px" Nodes="@_nodes" Connectors="@_connectors" SelectionSettings="@_selectedModel">
6+
</SfDiagramComponent>
7+
8+
@code
9+
{
10+
private SfDiagramComponent _diagram;
11+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
12+
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
13+
// Defines diagram's SelectionSettings.
14+
private DiagramSelectionSettings _selectedModel = new DiagramSelectionSettings();
15+
private DiagramObjectCollection<UserHandle> _userHandles = new DiagramObjectCollection<UserHandle>();
16+
protected override void OnInitialized()
17+
{
18+
//Creating the userhandle for cloning the objects.
19+
UserHandle cloneHandle = new UserHandle()
20+
{
21+
//Name of the user handle.
22+
Name = "clone",
23+
ImageUrl = "https://www.w3schools.com/images/w3schools_green.jpg",
24+
//Set visibility for the user handle.
25+
Visible = true,
26+
//Set the position for the user handle.
27+
Offset = 1,
28+
//Set the side for the user handle.
29+
Side = Direction.Left,
30+
//Set target of the userhandle
31+
VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector
32+
};
33+
//Add user handle to the collection.
34+
_userHandles = new DiagramObjectCollection<UserHandle>()
35+
{
36+
cloneHandle
37+
};
38+
_selectedModel = new DiagramSelectionSettings()
39+
{
40+
//Enable userhandle for the selected model.
41+
Constraints = SelectorConstraints.UserHandle,
42+
UserHandles = _userHandles
43+
};
44+
_nodes = new DiagramObjectCollection<Node>();
45+
Node diagramNode = new Node()
46+
{
47+
ID = "node1",
48+
OffsetX = 300,
49+
OffsetY = 200,
50+
Width = 130,
51+
Height = 130,
52+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" },
53+
Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "Node" } }
54+
};
55+
_nodes.Add(diagramNode);
56+
57+
Connector connector1 = new Connector()
58+
{
59+
ID = "connector1",
60+
SourcePoint = new DiagramPoint() { X = 600, Y = 120 },
61+
TargetPoint = new DiagramPoint() { X = 750, Y = 270 },
62+
Type = ConnectorSegmentType.Orthogonal
63+
};
64+
_connectors.Add(connector1);
65+
}
66+
}
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@page "/CustomizeUserHandlePath"
2+
3+
@using Syncfusion.Blazor.Diagram
4+
5+
<SfDiagramComponent @ref="_diagram" Width="1200px" Height="600px" Nodes="@_nodes" Connectors="@_connectors" SelectionSettings="@_selectedModel">
6+
</SfDiagramComponent>
7+
8+
@code
9+
{
10+
private SfDiagramComponent _diagram;
11+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
12+
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
13+
// Defines diagram's SelectionSettings.
14+
private DiagramSelectionSettings _selectedModel = new DiagramSelectionSettings();
15+
private DiagramObjectCollection<UserHandle> _userHandles = new DiagramObjectCollection<UserHandle>();
16+
protected override void OnInitialized()
17+
{
18+
//Creating the userhandle for cloning the objects.
19+
UserHandle cloneHandle = new UserHandle()
20+
{
21+
Name = "user1",
22+
//Set path data for userhandle.
23+
PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z",
24+
Visible = true,
25+
Offset = 0,
26+
Size = 30,
27+
Side = Direction.Right,
28+
Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 },
29+
VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector
30+
};
31+
//Add user handle to the collection.
32+
_userHandles = new DiagramObjectCollection<UserHandle>()
33+
{
34+
cloneHandle
35+
};
36+
_selectedModel = new DiagramSelectionSettings()
37+
{
38+
//Enable userhandle for the selected model.
39+
Constraints = SelectorConstraints.UserHandle,
40+
UserHandles = _userHandles
41+
};
42+
_nodes = new DiagramObjectCollection<Node>();
43+
Node diagramNode = new Node()
44+
{
45+
ID = "node1",
46+
OffsetX = 300,
47+
OffsetY = 200,
48+
Width = 130,
49+
Height = 130,
50+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" },
51+
Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "Node" } }
52+
};
53+
_nodes.Add(diagramNode);
54+
55+
Connector connector1 = new Connector()
56+
{
57+
ID = "connector1",
58+
SourcePoint = new DiagramPoint() { X = 600, Y = 120 },
59+
TargetPoint = new DiagramPoint() { X = 750, Y = 270 },
60+
Type = ConnectorSegmentType.Orthogonal
61+
};
62+
_connectors.Add(connector1);
63+
}
64+
}

Diagram/Server/Pages/UserHandle/CustomizeUserHandle.razor renamed to Diagram/Server/Pages/UserHandle/CustomizeUserHandleTemplate.razor

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
@page "/CustomizeUserHandle"
1+
@page "/CustomizeUserHandleTemplate"
2+
23
@using Syncfusion.Blazor.Diagram
34

4-
<SfDiagramComponent @ref="@Diagram" Width="1200px" Height="600px" Nodes="@nodes" Connectors="@connectors" SelectionSettings="@SelectedModel">
5+
<SfDiagramComponent @ref="_diagram" Width="1200px" Height="600px" Nodes="@_nodes" Connectors="@_connectors" SelectionSettings="@_selectedModel">
56
<DiagramTemplates>
67
<UserHandleTemplate>
78
@{
@@ -12,20 +13,19 @@
1213
</div>
1314

1415
}
15-
}
16+
}
1617
</UserHandleTemplate>
1718
</DiagramTemplates>
1819
</SfDiagramComponent>
1920

2021
@code
2122
{
22-
private SfDiagramComponent Diagram;
23-
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
24-
private DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
23+
private SfDiagramComponent _diagram;
24+
private DiagramObjectCollection<Node> _nodes = new DiagramObjectCollection<Node>();
25+
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
2526
// Defines diagram's SelectionSettings.
26-
private DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings();
27-
private DiagramObjectCollection<UserHandle> UserHandles = new DiagramObjectCollection<UserHandle>();
28-
27+
private DiagramSelectionSettings _selectedModel = new DiagramSelectionSettings();
28+
private DiagramObjectCollection<UserHandle> _userHandles = new DiagramObjectCollection<UserHandle>();
2929
protected override void OnInitialized()
3030
{
3131
//Creating the userhandle for cloning the objects.
@@ -40,17 +40,17 @@
4040
VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector
4141
};
4242
//Add user handle to the collection.
43-
UserHandles = new DiagramObjectCollection<UserHandle>()
43+
_userHandles = new DiagramObjectCollection<UserHandle>()
4444
{
4545
cloneHandle
4646
};
47-
SelectedModel = new DiagramSelectionSettings()
47+
_selectedModel = new DiagramSelectionSettings()
4848
{
4949
//Enable userhandle for the selected model.
5050
Constraints = SelectorConstraints.UserHandle,
51-
UserHandles = this.UserHandles
51+
UserHandles = _userHandles
5252
};
53-
nodes = new DiagramObjectCollection<Node>();
53+
_nodes = new DiagramObjectCollection<Node>();
5454
Node diagramNode = new Node()
5555
{
5656
ID = "node1",
@@ -61,7 +61,7 @@
6161
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" },
6262
Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation { Content = "Node" } }
6363
};
64-
nodes.Add(diagramNode);
64+
_nodes.Add(diagramNode);
6565

6666
Connector connector1 = new Connector()
6767
{
@@ -70,6 +70,6 @@
7070
TargetPoint = new DiagramPoint() { X = 750, Y = 270 },
7171
Type = ConnectorSegmentType.Orthogonal
7272
};
73-
connectors.Add(connector1);
73+
_connectors.Add(connector1);
7474
}
7575
}

0 commit comments

Comments
 (0)