Class DiagramNodeAnnotation

Represents the block of text displayed over the node.

Inheritance
System.Object
SfDiagramBase
DiagramNodeAnnotation
Inherited Members
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.

This property allows the user to add a hyperlink to the node label.

Declaration
public NodeHyperlink Hyperlink { get; set; }
Property Value
Type Description
NodeHyperlink

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