Class DiagramConnectorAnnotation

Represents the block of text displayed over the connector.

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

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