Class DiagramConnectorAnnotation
Represents the block of text displayed over the connector.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramConnectorAnnotation : SfDiagramBase
Remarks
Annotation is used to present some textual data for the connector which can be edited at runtime. Multiple annotations can be added to the connector. Users can able to modify the annotation style, visibility, width, height, and content of the annotation through code or visually.
Examples
<SfDiagram Height="600px" Connectors="@ConnectorCollection">
</SfDiagram>
@code
{
//Defines diagram's connector collection
public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }
protected override void OnInitialized()
{
ConnectorCollection = new ObservableCollection<DiagramConnector>();
DiagramConnector Connector = new DiagramConnector()
{
SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 40 },
TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 160 },
Type = Segments.Orthogonal,
Style = new ConnectorShapeStyle()
{StrokeColor = "#6BA5D7”},
Annotations = new ObservableCollection<DiagramConnectorAnnotation>()
{
//An annotation is created and stored in the Annotation collection of the connector.
new DiagramConnectorAnnotation () {Content = "Annotation" }
}
};
ConnectorCollection.Add(Connector);
}
}
Constructors
DiagramConnectorAnnotation()
Represents the block of text displayed over the connector.
Declaration
public DiagramConnectorAnnotation()
Properties
AddInfo
Specifies the additional information about annotation.
Declaration
public object AddInfo { get; set; }
Property Value
Type | Description |
---|---|
System.Object |
Remarks
Enables the user to store data of any datatype. It will be serialized and deserialized automatically while saving and opening the diagram.
Examples
public class AddInfo{
public string Description{get, set}
}
// An annotation is created and stored in an Annotation collection of the Connector.
Annotations = new ObservableCollection<DiagramConnectorAnnotation>() {
new DiagramConnectorAnnotation()
Content = "Annotation"
AddInfo = new AddInfo() { Description = “Annotation1”}
}
Alignment
Specifies the position of the label based on the segment alignment.
Declaration
public AnnotationAlignment Alignment { get; set; }
Property Value
Type | Description |
---|---|
AnnotationAlignment |
Remarks
Specifies the position of the label based on the segment alignment. |
1. Center - Aligns the annotation at the center of a connector segment. |
2. Before - Aligns the annotation before a connector segment. |
3. After - Aligns the annotation after a connector segment. |
By default, the alignment is set as the center. |
AnnotationType
This property allows the users to define a type of annotation template.
Declaration
public AnnotationType AnnotationType { get; set; }
Property Value
Type | Description |
---|---|
AnnotationType |
Remarks
The following values can be set for the value of the Annotation. |
1. String - Annotation template to be in the string. |
2. Template - Annotation template to be in HTML Content. |
Constraints
The constraints property allows the user to enable or disable certain behaviors of the label. For instance, the user can disable annotation editing and able to make it as read-only.
Declaration
public AnnotationConstraints Constraints { get; set; }
Property Value
Type | Description |
---|---|
AnnotationConstraints |
Content
Gets or sets the textual description of the connector.
Declaration
public string Content { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Displacement
The Displacement property allows the user to dislocate the annotation from its original place by the given value.
Declaration
public ConnectorDisplacementPoint Displacement { get; set; }
Property Value
Type | Description |
---|---|
ConnectorDisplacementPoint |
Remarks
By default, the annotation will be in the center of the connector path. When the user assigns value to the Displacement property, the annotation will be displaced from its position by displacement value.
DragLimit
This property allows the user to limit the dragging of connector label to a certain distance. By default, it is set to 20 from all sides.
Declaration
public ConnectorAnnotationDragLimit DragLimit { get; set; }
Property Value
Type | Description |
---|---|
ConnectorAnnotationDragLimit |
Examples
// An annotation is created and stored in the Annotation collection of the connector.
Annotations = new ObservableCollection<DiagramConnectorAnnotation>() {
new DiagramConnectorAnnotation()
Content = "Annotation"
DragLimit = new DiagramConnectorAnnotationDragLimit() { Top = 20, Left = 20 ,Right = 20, Bottom = 20}
}
Height
Gets or sets the height of the annotations.
Declaration
public double Height { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
HorizontalAlignment
Describes how an annotation element is horizontally positioned or stretched within a connector. the characteristics of its immediate parent.
Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type | Description |
---|---|
HorizontalAlignment |
Remarks
The list of following options is used to defining the Horizontal Alignment of the annotation |
1. Stretch - Stretches the diagram element throughout the connector |
2. Left - Aligns the diagram element at the left of the connector |
3. Right - Aligns the diagram element at the right of the connector |
4. Center - Aligns the diagram element at the center of the connector |
5. Auto - Aligns the diagram element based on the characteristics of the connector |
By default, HorizontalAlignment is set to center. |
Hyperlink
This property allows the user to add a hyperlink to the connector label.
Declaration
public ConnectorHyperlink Hyperlink { get; set; }
Property Value
Type | Description |
---|---|
ConnectorHyperlink |
Id
Returns the unique id of an Annotation. .
Declaration
public string Id { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Remarks
Annotation Id needs to be unique to use. When creating a label, the user should not provide the same id to other labels.
Margin
Specifies the space around the annotation content. The default values for the Margin are set to 0 from all sides.
Declaration
public ConnectorAnnotationMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
ConnectorAnnotationMargin |
Examples
Annotations = new ObservableCollection<DiagramConnectorAnnotation> ()
{
//An annotation is created and stored in the Annotations collection of Connector.
new DiagramConnectorAnnotation()
{
Content = "Annotation),
Margin = new ConnectorAnnotationMargin() { Top = 0, Left = 0, Bottom = 0, Right = 0 }
}
};
Offset
Specifies the position of the label relative to the bounds of the connector. The default value for offset is set to 0.5.
Declaration
public double Offset { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
RotateAngle
Gets or sets the rotation angle of the label.
Declaration
public double RotateAngle { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
Connector labels can be rotated either by code-behind or mouse interaction. By default, the rotate angle will be 0.
SegmentAngle
This property allows the user to rotate the annotation based on the connector segment direction.
Declaration
public bool SegmentAngle { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Remarks
By default, the annotation will be rotated in the connector path. When the user assigns value to the SegmentPath property, the annotation will be rotated from its position based on the connector segment direction.
Style
Defines the appearance of the text.
Declaration
public AnnotationStyle Style { get; set; }
Property Value
Type | Description |
---|---|
AnnotationStyle |
Remarks
Users can change the font style of the label with the font specific properties such as font family, font size, font color, bold, etc., The fill and border appearances of the text can also be customized with appearance specific properties of label such as fill color, border color, etc.
Template
This property represents the template’s content of the label. The User can define any HTML content as a template.
Declaration
public string Template { get; set; }
Property Value
Type | Description |
---|---|
System.String |
Remarks
Users can set the label content as a template instead of textual content or hyperlink, by using template property. For that SVG or HTML content should be defined as a string in an annotation’s template property. By default, it is undefined.
Type
This property is used to define the positioning behavior of the annotation. It can be either “Shape” or “Path”.
Declaration
public AnnotationTypes Type { get; set; }
Property Value
Type | Description |
---|---|
AnnotationTypes |
Remarks
The following values can be set for the Type property of the annotation, |
1. shape - sets the annotation type to shape. |
2. Path – sets the annotation type to the path. |
VerticalAlignment
Describes how an annotation element is vertically positioned or stretched within a connector.
Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type | Description |
---|---|
VerticalAlignment |
Remarks
The list of following options is used to defining the vertical alignment of the annotation, |
1. Top - Aligns the diagram element at the top of the connector. |
2. Bottom - Aligns the diagram element at the bottom of the connector. |
3. Center - Aligns the diagram element at the center of the connector. |
4. Auto - Aligns the diagram element based on the characteristics of the connector. |
By default, VerticalAlignment is set to center. |
Visibility
specifies the visibility of the annotation.
Declaration
public bool Visibility { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
Remarks
By default, visibility is set to true. If the visibility is false, then the connector annotation will not be visible.
Width
Gets or sets the width of an annotation.
Declaration
public double Width { get; set; }
Property Value
Type | Description |
---|---|
System.Double |