Skip to content

Commit 92d31ac

Browse files
SuganthiK963SuganthiK963
authored
Merge pull request #6658 from syncfusion-content/ES-983512-UG
Revamping the Ug
2 parents 8d12160 + 245a8f0 commit 92d31ac

15 files changed

+304
-205
lines changed

‎blazor/diagram/annotations/appearance.md‎

Lines changed: 78 additions & 51 deletions
Large diffs are not rendered by default.

‎blazor/diagram/annotations/connector-annotation.md‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
33
title: Connector Annotation Position in Blazor Diagram | Syncfusion
4-
description: Checkout and learn here all about Annotation for Connector in Syncfusion Blazor Diagram component and more.
4+
description: Checkout and Learn how to position and align annotations on connectors in the Syncfusion Blazor Diagram component and much more details.
55
platform: Blazor
66
control: Diagram Component
77
documentation: ug
88
---
99

1010
# Connector Annotation Position in Blazor Diagram
1111

12-
Annotations of a connector can be positioned using the following properties of Annotation class.
12+
Connector annotations can be precisely positioned using several properties of the `PathAnnotation` class, including:
1313

1414
* Offset
1515
* Alignment
@@ -21,7 +21,7 @@ Annotations of a connector can be positioned using the following properties of A
2121

2222
## How to Update Offset Position for Annotations
2323

24-
The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property of an annotation is used to align the annotations based on fractions. A value of 0 represents Top-Left corner, 1 represents Bottom-Right corner, and 0.5 represents half of Width/Height.
24+
The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Offset) property positions an annotation along the length of the connector segment. It accepts a fractional value from **0** to **1**, where **0** represents the beginning of the segment, **1** represents the end, and **0.5** represents the center.
2525

2626
```cshtml
2727
@using Syncfusion.Blazor.Diagram
@@ -68,19 +68,21 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat
6868
}
6969
}
7070
```
71-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation)
71+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSsDtHrxzCiyfQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
72+
73+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/UpdateOffsetofAnnotation)
7274

7375
The following image shows the relationship between the annotation position and offset (fraction values).
7476

7577
![Displaying Annotation based on Offset in Blazor Diagram](../images/blazor-diagram-annotation-basedon-offset.png)
7678

7779
>**Note:**
78-
> * By default, offset value of the connector annotation is 0.5.
79-
> * Connector annotation's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.
80+
> * By default, the `offset` value of a connector annotation is 0.5.
81+
> * An annotation's ID must not start with a number or special character and must not contain underscores(_) or spaces.
8082
8183
## How to Change Annotation Alignment
8284

83-
The connector’s annotation can be aligned over its segment path using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property of the annotation.
85+
The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Alignment) property aligns an annotation relative to the connector's path.
8486

8587
```cshtml
8688
@using Syncfusion.Blazor.Diagram
@@ -121,7 +123,9 @@ The connector’s annotation can be aligned over its segment path using the [Ali
121123
}
122124
}
123125
```
124-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation)
126+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIWNNdhRHwmmwP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
127+
128+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/AlignmentOfAnnotation)
125129

126130
The following screenshot shows how the annotation of the connector aligned over its path.
127131

@@ -131,7 +135,7 @@ N> By default, Alignment value of the connector annotation is `Center`.
131135

132136
## How to Change Annotation Displacement
133137

134-
The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property is used to dislocate the annotation by the value given. By default, annotation will be in centered on the connector path. When you assign a value to the Displacement property, the annotation will be displaced from its position by displacement value.
138+
The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PathAnnotation.html#Syncfusion_Blazor_Diagram_PathAnnotation_Displacement) property moves an annotation from its default position along the connector path. By default, annotation will be in centered on the connector path. It accepts a DiagramPoint object that specifies the horizontal (X) and vertical (Y) distance to move the annotation.
135139

136140
```cshtml
137141
@using Syncfusion.Blazor.Diagram
@@ -171,7 +175,9 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr
171175
}
172176
}
173177
```
174-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation)
178+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSiDjdhHmyHgYP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
179+
180+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/DisplacementOfAnnotation)
175181

176182
## How to Update Annotation Segment Angle
177183

@@ -213,20 +219,22 @@ The following code example shows how the connector annotation rotated in its pat
213219
}
214220
}
215221
```
216-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation)
222+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLIWtDnBRPnqaBj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
223+
224+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AnnotationOfConnector/SegmentAngleOfAnnotation)
217225

218226
| SegmentAngle | Output |
219227
|---|---|
220228
| True | ![Blazor Diagram Annotation in Vertical Position](../images/blazor-diagram-annotation-in-vertical-position.png) |
221229
| False | ![Blazor Diagram Annotation in Horizontal Position](../images/blazor-diagram-annotation-in-horizontal-position.png) |
222230

223-
N> By default, the SegmentAngle will be disabled.
231+
N> By default, the `SegmentAngle` property is **false**.
224232

225233
The `HorizontalAlignment`, `VerticalAlignment` and `Margin` properties were explained in the [NodeAnnotation](./node-annotation).
226234

227235
## See also
228236

229-
* [How to add annotation for Node](./node-annotation)
237+
* [How to add an annotation for a Node](./node-annotation)
230238

231239
* [How to add or remove annotation constraints](../constraints#annotation-constraints)
232240

‎blazor/diagram/annotations/events.md‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
---
22
layout: post
33
title: Annotation Events in Blazor Diagram Component | Syncfusion
4-
description: Checkout and learn here all about Events in Syncfusion Blazor Diagram component and much more details.
4+
description: Checkout and Learn how to use annotation events in the Syncfusion Blazor Diagram component and much more details.
55
platform: Blazor
66
control: Diagram Component
77
documentation: ug
88
---
99

1010
# Annotation Events in Blazor Diagram Component
1111

12-
## How to Handle Text Change event
12+
## How to Handle Text Change Event
1313

1414
* While editing a node's or connector's annotation, the following event can be used to do the customization.
1515
* When a node's or connector's annotation is changed in the diagram, this event is getting triggered.
1616

1717
|Event Name|Arguments|Description|
1818
|------------|-----------|------------------------|
19-
|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers when the node’s/connector's label is changed in the diagram.|
20-
|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's label is changing in the diagram.|
19+
|[TextChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanged)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|Triggers after a node or connector's annotation text has been changed in the diagram.|
20+
|[TextChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_TextChanging)|[TextChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.TextChangeEventArgs.html)|An event that is raised when the node and connector's annotation text is changing in the diagram.|
2121

22-
The following code example shows how to register and get notifications from the TextChanged and TextChanging events.
22+
The following code example shows how to register and get notifications from the `TextChanged` and `TextChanging` events.
2323

2424
```cshtml
2525
@using Syncfusion.Blazor.Diagram
@@ -61,14 +61,16 @@ The following code example shows how to register and get notifications from the
6161
}
6262
}
6363
```
64-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent)
64+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVoijjnBnkUtSTH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
65+
66+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Events/TextChangedEvent)
6567

6668
## See also
6769

6870
* [How to add or remove annotation constraints](../constraints#annotation-constraints)
6971

7072
* [How to customize the annotation](./appearance)
7173

72-
* [How to add annotation for Node](./node-annotation)
74+
* [How to add an annotation for a Node](./node-annotation)
7375

74-
* [How to add annotation for Connector](./connector-annotation)
76+
* [How to add an annotation for a Connector](./connector-annotation)

‎blazor/diagram/annotations/interactions.md‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Annotation Interaction in Blazor Diagram Component | Syncfusion
4-
description: Checkout and learn here all about Interaction in Syncfusion Blazor Diagram component and much more details.
4+
description: Checkout and Learn how to interact with annotations in the Syncfusion Blazor Diagram component and much more details.
55
platform: Blazor
66
control: Diagram Component
77
documentation: ug
@@ -12,7 +12,7 @@ documentation: ug
1212
Diagram provides the support to the annotations rotation interactively.
1313

1414
## How to Rotate Annotations
15-
The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure RotationReference for an annotation.
15+
The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ShapeAnnotation.html#Syncfusion_Blazor_Diagram_ShapeAnnotation_RotationReference) property of an annotation allows you to control whether the text should rotate relative to its parent node or the Page. The following code examples illustrate how to configure `RotationReference` for an annotation.
1616

1717

1818
```cshtml
@@ -67,21 +67,21 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
6767
}
6868
}
6969
```
70-
70+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVesNXxpShYJhRa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
7171

7272
Value | Description | Image |
7373
| -------- | -------- | -------- |
74-
| Page | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) |
75-
| Parent | In this case, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) |
74+
| **Page** | When this option is set, the annotation remains fixed in its original orientation even if its parent node is rotated. | ![Blazor Diagram RotationReference page](../images/rotationReferencePage.gif) |
75+
| **Parent** | When this option is set, the annotation rotates along with its parent node. | ![Blazor Diagram RotationReference Parent](../images/rotationReferenceParent.gif) |
7676

7777

78-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference)
78+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference)
7979

8080
## How to rotate a Annotation using the RotationAngle property
8181

82-
The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0.
82+
The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property sets the rotation angle of an annotation in degrees. This determines how much the annotation text is tilted from its normal position. The default value is **0**.
8383

84-
The following code examples illustrate how to configure RotationAngle for an annotation.
84+
The following code examples illustrate how to configure `RotationAngle` for an annotation.
8585

8686
```cshtml
8787
@using Syncfusion.Blazor.Diagram
@@ -112,16 +112,18 @@ The following code examples illustrate how to configure RotationAngle for an ann
112112
}
113113
}
114114
```
115-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty)
115+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIiZDRTogIAqku?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
116+
117+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty)
116118

117119
![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png)
118120

119121
## See also
120122

121123
* [How to add or remove annotation constraints](../constraints#annotation-constraints)
122124

123-
* [How to add annotation for Node](./node-annotation)
125+
* [How to add an annotation for a Node](./node-annotation)
124126

125-
* [How to add annotation for Connector](./connector-annotation)
127+
* [How to add an annotation for a Connector](./connector-annotation)
126128

127129
* [How to animate connectors using annotationtemplate in angular diagram](https://support.syncfusion.com/kb/article/20265/how-to-animate-connectors-using-annotationtemplate-in-angular-diagram )

0 commit comments

Comments
 (0)