Skip to content

Commit 346f9ad

Browse files
Keerthivasan-RamamoorthyKeerthivasan-Ramamoorthy
authored
Merge pull request #4779 from syncfusion-content/ES-903107-UGTesting
ES 903107: UG Testing
2 parents bd0300e + 56e9ced commit 346f9ad

File tree

15 files changed

+104
-77
lines changed

15 files changed

+104
-77
lines changed

‎blazor/diagram/commands.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -678,7 +678,8 @@ The following code illustrates how to execute the clipboard commands.
678678
DiagramObjectCollection<NodeBase> nodeBase = new DiagramObjectCollection<NodeBase>();
679679
Node clonedNode = diagram.Nodes[0].Clone() as Node;
680680
nodeBase.Add(clonedNode);
681-
681+
clonedNode.OffsetX += 10;
682+
clonedNode.OffsetY += 10;
682683
//pastes an object as a parameter.
683684
diagram.Paste(nodeBase);
684685
}
@@ -1139,7 +1140,7 @@ The [Undo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDia
11391140
}
11401141
}
11411142
```
1142-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/NudgeCommand/NudgeCommand)
1143+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/UndoRedoCommands)
11431144

11441145

11451146
## How to bring the specific element into the viewport of the diagram
@@ -1501,7 +1502,7 @@ The following code illustrates how to execute the CanZoomIn command.
15011502
```
15021503
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Commands/CanZoomIn)
15031504

1504-
![CanZoomIn to bring the small diagram into view](images/CanZoomIn.webp)
1505+
![CanZoomIn to bring the small diagram into view](images/CanZoomIn.png)
15051506

15061507
## Command manager
15071508

‎blazor/diagram/data-binding.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou
8686
};
8787
}
8888
```
89-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding)
89+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/Parent-Child%20Relationship)
9090
9191
## How to bind local data with diagram
9292

@@ -244,7 +244,12 @@ The following code example illustrates how to bind ExpandoObject data with the d
244244
int VerticalSpacing = 30;
245245
public List<ExpandoObject> DataSource { get; set; }
246246
public List<ExpandoObject> ExpandoData = new List<ExpandoObject>();
247-
247+
public class ExpandoObject
248+
{
249+
public string Name { get; set; }
250+
public string Category { get; set; }
251+
public string FillColor { get; set; }
252+
}
248253
// Defines the connector's default values.
249254
private void ConnectorDefaults(IDiagramObject connector)
250255
{
@@ -393,6 +398,7 @@ The following code example illustrates how to bind DynamicObject data with the d
393398

394399
```cshtml
395400
@using Syncfusion.Blazor.Diagram
401+
@using System.Dynamic
396402

397403
<SfDiagramComponent @ref="@Diagram"
398404
Height="499px"
@@ -491,7 +497,7 @@ The following code example illustrates how to bind DynamicObject data with the d
491497
}
492498
protected override void OnInitialized()
493499
{
494-
this.ExpandoDataSource = GetData();
500+
this.DataSource = GetData();
495501
}
496502
public List<HierarchicalDetails> GetData()
497503
{
@@ -926,7 +932,7 @@ The following sample code demonstrates hoe to bind remote data to the Diagram co
926932
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/WebAPIAdaptor)
927933
928934
### Binding with URL services
929-
A URL service is a web service accessible via a Uniform Resource Locator (URL). These services provide specific functionalities or data when a client sends an HTTP request to the given URL. URL services are a foundational aspect of web-based APIs (Application Programming Interfaces) and RESTful services. The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) serves as the base adaptor for interacting with remote data services. Most built-in adaptors are derived from the `UrlAdaptor`.
935+
A URL service is a web service accessible via a Uniform Resource Locator (URL). These services provide specific functionalities or data when a client sends an HTTP request to the given URL. URL services are a foundational aspect of web-based APIs (Application Programming Interfaces) and RESTful services. The [UrlAdaptor](../data/adaptors#url-adaptor) serves as the base adaptor for interacting with remote data services. Most built-in adaptors are derived from the `UrlAdaptor`.
930936

931937
The following sample code demonstrates how to bind data to the Diagram component through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) using the `UrlAdaptor`,
932938
@@ -1016,7 +1022,7 @@ The following sample code demonstrates how to bind data to the Diagram component
10161022
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/RemoteData/URLAdaptor)
10171023
10181024
### Binding with GraphQL service
1019-
GraphQL is a query language for APIs with which you can get exactly what you need and nothing more. The GraphQLAdaptor provides an option to retrieve data from the GraphQL server. For more details on GraphQL service, refer to the [GraphQL documentation](https://blazor.syncfusion.com/documentation/data/adaptors#graphql-service-binding).
1025+
GraphQL is a query language for APIs with which you can get exactly what you need and nothing more. The GraphQLAdaptor provides an option to retrieve data from the GraphQL server. For more details on GraphQL service, refer to the [GraphQL documentation](../data/adaptors#graphql-service-binding).
10201026

10211027
```cshtml
10221028
@using Syncfusion.Blazor.Diagram

‎blazor/diagram/events.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
8686
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent)
8787

8888
## PropertyChanged Event
89-
The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when the property changed at run time. To explore about arguments, refer to[PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html)
89+
The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when the property changed at run time. To explore about arguments, refer to [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html)
9090

9191
```cshtml
9292
@using Syncfusion.Blazor.Diagram
@@ -369,10 +369,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
369369
Nodes="nodes"
370370
DragStart="DragStart">
371371
</SfDiagramComponent>
372-
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
372+
<SfSymbolPaletteComponent @ref="PaletteInstance" Height="600px" Palettes="@Palettes" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
373373
</SfSymbolPaletteComponent >
374374
@code{
375375
SfDiagramComponent Diagram;
376+
SfSymbolPaletteComponent PaletteInstance;
376377
DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
377378
DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
378379
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
@@ -395,6 +396,11 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
395396
{
396397
new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
397398
};
399+
}
400+
protected override async Task OnAfterRenderAsync(bool firstRender)
401+
{
402+
PaletteInstance.Targets = new DiagramObjectCollection<SfDiagramComponent>() { };
403+
PaletteInstance.Targets.Add(Diagram);
398404
}
399405
//Notify the drag start event.
400406
private void DragStart(DragStartEventArgs args)

‎blazor/diagram/grid-lines.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
5151
}
5252
}
5353
```
54-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomizeGridline)
54+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomGridline)
5555

5656
![GridLines in Blazor Diagram](images/blazor-diagram-gridlines.png)
5757

@@ -110,7 +110,7 @@ The appearance of the grid lines can be changed into dots by using the [GridType
110110
}
111111
112112
```
113-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomGridline)
113+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomizeGridline)
114114

115115

116116
![Dot Grid in Blazor Diagram](images/blazor-diagram-dot-grid.png)

‎blazor/diagram/how-to.md‎

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
182182
OffsetY = 100,
183183
Width = 100,
184184
Height = 100,
185-
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
185+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }
186186
});
187187
Nodes.Add(new Node()
188188
{
@@ -204,14 +204,14 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
204204
{
205205
ID = "group",
206206
Children = new string[] { "node2", "node3" },
207-
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
207+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }
208208
});
209209
Connectors.Add(new Connector()
210210
{
211211
SourceID = "node1",
212212
TargetID = "group",
213213
Style = new ShapeStyle() { StrokeColor = "#6495ED" },
214-
TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } }
214+
TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } }
215215
});
216216
}
217217
private void Clear()
@@ -899,41 +899,51 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
899899
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
900900
901901
902-
protected override void OnInitialized()
903-
{
904-
Node node = new Node()
905-
{
906-
ID = "node1",
907-
Width = 50,
908-
Height = 50,
909-
OffsetX = 900,
910-
OffsetY = 100,
911-
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }
912-
};
913-
Connector Connector = new Connector()
914-
{
915-
ID = "connector1",
916-
SourceID = "node1",
917-
TargetDecorator = new DecoratorSettings()
902+
protected override void OnInitialized()
903+
{
904+
Node node = new Node()
905+
{
906+
ID = "node1",
907+
Width = 50,
908+
Height = 50,
909+
OffsetX = 350,
910+
OffsetY = 100,
911+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }
912+
};
913+
Node node2 = new Node()
918914
{
915+
ID = "node2",
916+
Width = 50,
917+
Height = 50,
918+
OffsetX = 450,
919+
OffsetY = 100,
920+
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }
921+
};
922+
Connector Connector = new Connector()
923+
{
924+
ID = "connector1",
925+
SourceID = "node1",
926+
TargetDecorator = new DecoratorSettings()
927+
{
928+
Style = new ShapeStyle()
929+
{
930+
Fill = "#6495ED",
931+
StrokeColor = "#6495ED",
932+
}
933+
},
934+
TargetID = "node2",
919935
Style = new ShapeStyle()
920-
{
921-
Fill = "#6495ED",
936+
{
937+
Fill = "#6495ED",
922938
StrokeColor = "#6495ED",
923-
}
924-
},
925-
TargetID = "node2",
926-
Style = new ShapeStyle()
927-
{
928-
Fill = "#6495ED",
929-
StrokeColor = "#6495ED",
930-
},
931-
Type = ConnectorSegmentType.Straight,
932-
};
939+
},
940+
Type = ConnectorSegmentType.Straight,
941+
};
933942
connectors.Add(Connector);
934943
nodes.Add(node);
944+
nodes.Add(node2);
935945
936-
}
946+
}
937947
938948
public string cursor(DiagramElementAction action, bool active, string handle)
939949
{
@@ -1639,7 +1649,7 @@ The following code illustrates how to set background color for node.
16391649
}
16401650
private void GetParent()
16411651
{
1642-
diagram.Nodes[0].GetParent();
1652+
IDiagramObject parent = diagram.Nodes[0].GetParent();
16431653
}
16441654
}
16451655
```

‎blazor/diagram/images/CanZoomIn.png‎

38.8 KB
Loading

‎blazor/diagram/images/CanZoomIn.webp‎

-4.62 KB
Binary file not shown.

‎blazor/diagram/interaction.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ An element can be selected by clicking that element. During single click, all pr
2828
| [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanged) | [SelectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectionChangedEventArgs.html) | Notify after clicking to select the elements in the diagram. |
2929

3030
```csharp
31+
@using Syncfusion.Blazor.Diagram
32+
3133
<SfDiagramComponent Height="600px" Nodes="@NodeCollection"
3234
SelectionChanging="OnSelectionChanging"
3335
SelectionChanged="OnSelectionChanged">
@@ -340,7 +342,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
340342
}
341343
```
342344
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramPositionEvent)
343-
For more information about dragging, refer [Node Drag](https://blazor.syncfusion.com/documentation/diagram/nodes/interaction#drag)
345+
For more information about dragging, refer [Node Drag](./nodes/interaction#how-to-drag-the-node)
344346

345347
## Resize
346348

@@ -391,9 +393,9 @@ For more information about dragging, refer [Node Drag](https://blazor.syncfusion
391393
```
392394
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramSizeEvent)
393395
394-
For more information about resizing, refer [Node Resize](https://blazor.syncfusion.com/documentation/diagram/nodes/interaction#resize)
396+
For more information about resizing, refer [Node Resize](./nodes/interaction#how-to-resize-the-node)
395397

396-
N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to [Snapping](https://blazor.syncfusion.com/documentation/diagram/grid-lines#snapping).
398+
N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to [Snapping](./grid-lines#snapping).
397399

398400
## Rotate
399401

@@ -445,7 +447,7 @@ N> While dragging and resizing, the objects are snapped towards the nearest obje
445447
```
446448
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/DiagramRotateEvent)
447449
448-
For more information about resizing, refer [Node Rotate](https://blazor.syncfusion.com/documentation/diagram/nodes/interaction#rotate)
450+
For more information about resizing, refer [Node Rotate](./nodes/interaction#how-to-rotate-the-node)
449451

450452
## Connection editing
451453

@@ -455,7 +457,7 @@ For more information about resizing, refer [Node Rotate](https://blazor.syncfusi
455457

456458
Source and target points of the selected connectors are represented with two handles. Clicking and dragging those handles help you to adjust the source and target points.
457459

458-
For more information, refer [End Point Dragging](https://blazor.syncfusion.com/documentation/diagram/connectors/interactions#end-point-dragging)
460+
For more information, refer [End Point Dragging](./connectors/interactions#end-point-dragging)
459461

460462
* If you drag the connector end points, then the following events can be used to do your customization.
461463
* When you connect connector with ports/node or disconnect from it, the following events are triggered.
@@ -545,7 +547,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
545547
* Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
546548
* Straight segments can be removed by clicking the segment end point, when Ctrl and Shift keys are pressed (Ctrl+Shift+Click).
547549

548-
For more information about straight segment editing, refer [Straight Segment Editing](https://blazor.syncfusion.com/documentation/diagram/connectors/interactions#straight-segment-editing)
550+
For more information about straight segment editing, refer [Straight Segment Editing](./connectors/segments/straight#straight-segment-editing)
549551

550552
## Orthogonal segment editing
551553

@@ -621,7 +623,7 @@ For more information about straight segment editing, refer [Straight Segment Edi
621623
```
622624
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction/SegmentEditing)
623625
624-
For more information about orthogonal segment editing, refer [Orthogonal Segment Editing](https://blazor.syncfusion.com/documentation/diagram/connectors/interactions#orthogonal-segment-editing).
626+
For more information about orthogonal segment editing, refer [Orthogonal Segment Editing](./connectors/segments/orthogonal#orthogonal-segment-editing).
625627

626628
## User handles
627629

‎blazor/diagram/layout/complex-hierarchical-layout.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ Complex hierarchical tree layout arranges nodes in a tree-like structure, where
4040
{
4141
Node node = obj as Node;
4242
node.Height = 40;
43-
node.Width = 100;
43+
node.Width = 50;
4444
//Initializing the default node's shape style.
45-
node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" };
45+
node.Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" };
4646
node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true };
4747
}
4848

@@ -224,6 +224,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
224224
The following code illustrates how to arrange the nodes in linear manner.
225225

226226
```csharp
227+
@using Syncfusion.Blazor.Diagram
227228
<SfDiagramComponent Height="600px" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
228229
<DataSourceSettings ID="Id" ParentID="ReportingPerson" DataSource="@DataSource"></DataSourceSettings>
229230
<Layout Type="LayoutType.ComplexHierarchicalTree" LinearArrangement="true" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">

0 commit comments

Comments
 (0)