Class DiagramNodeAnnotation
Represents the block of text displayed over the node.
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramNodeAnnotation : SfDiagramBase
Remarks
Annotation is used to present some textual data for the node which can be edited at runtime. Multiple annotations can be added to a node. User can able to modify the annotation style, visibility, width, height, and content of the annotation through code or visually.
Examples
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
protected override void OnInitialized()
{
// A node is created and stored in the node array.
DiagramNode Node = new DiagramNode()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
// Initialize port collection
Annotations = new ObservableCollection<DiagramNodeAnnotation>()
{
// An annotation is created and stored in an Annotation collection of Node.
new DiagramNodeAnnotation() { Content = "Annotation" }
}
};
};
NodeCollection.Add(Node);
}
}
Constructors
DiagramNodeAnnotation()
Represents the block of text displayed over the node.
Declaration
public DiagramNodeAnnotation()
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 node.
Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
new DiagramNodeAnnotation()
Content = "Annotation"
AddInfo = new AddInfo() { Description = “Annotation1”}
}
AnnotationType
This property allows the user 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 node.
Declaration
public string Content { get; set; }
Property Value
Type | Description |
---|---|
System.String |
DragLimit
This property allows the user to limit the dragging of node labels to a certain distance. By default, DragLimit is set to 20 from all sides.
Declaration
public NodeAnnotationDragLimit DragLimit { get; set; }
Property Value
Type | Description |
---|---|
NodeAnnotationDragLimit |
Examples
// An annotation is created and stored in an annotation collection of the node.
Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
new DiagramNodeAnnotation()
Content = "Annotation"
DragLimit = new NodeAnnotationDragLimit() { 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 node.
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 node. |
2. Left - Aligns the diagram element at the left of the node. |
3. Right - Aligns the diagram element at the right of the node. |
4. Center - Aligns the diagram element at the center of the node. |
5. Auto - Aligns the diagram element based on the characteristics of the node. |
Hyperlink
This property allows the user to add a hyperlink to the node label.
Declaration
public NodeHyperlink Hyperlink { get; set; }
Property Value
Type | Description |
---|---|
NodeHyperlink |
Remarks
User can able to show hyperlink as an annotation content or alternate display text for the hyperlink In the following image, you can see the alternate display text for the hyperlink has set as an annotation content.
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 NodeAnnotationMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
NodeAnnotationMargin |
Examples
Annotations = new ObservableCollection<DiagramNodeAnnotation> ()
{
//An annotation is created and stored in the Annotations collection of Node.
new DiagramNoderAnnotation()
{
Content = "Annotation",
Margin = new NodeAnnotationMargin() { Top = 10, Left = 10, Bottom = 10, Right = 10 }
}
};
Offset
Specifies the position of the label relative to the bounds of the node.
Declaration
public NodeAnnotationOffset Offset { get; set; }
Property Value
Type | Description |
---|---|
NodeAnnotationOffset |
Remarks
Offset values range from 0 to 1. By default, the offset values are set to X= 0.5 and Y=0.5. |
1. When x= 0 and y = 0, then the label will be position at the top left corner of the node. |
2. When x= 0.5 and y = 0.5, then the label will be position at the center of the node. |
3. When x= 1 and y = 1, then the label will be position at the bottom right corner of the node. |
RotateAngle
Gets or sets the rotation angle of the label.
Declaration
public double RotateAngle { get; set; }
Property Value
Type | Description |
---|---|
System.Double |
Remarks
Node labels can be rotated either by code-behind or mouse interaction. By default, the rotate angle will be 0.
Style
Defines the appearance of the text.
Declaration
public AnnotationStyle Style { get; set; }
Property Value
Type | Description |
---|---|
AnnotationStyle |
Remarks
User 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/HTML content should be defined as a string in an annotation’s template property.
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 node.
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 node. |
2. Bottom - Aligns the diagram element at the bottom of the node. |
3. Center - Aligns the diagram element at the center of the node. |
4. Auto - Aligns the diagram element based on the characteristics of the node. |
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 it is false, then the node 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 |