Search results

Annotation in Blazor Diagram component

Annotation is a block of text that can be displayed over a node or connector. Multiple annotations can be added to a node/connector.

Create annotation

An annotation can be added to a node/connector by defining the annotation object and adding that to the annotation collection of the node/connector. The Content property of annotation defines the text to be displayed. The following code illustrates how to create an annotation.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
</SfDiagram>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Content = "Node" } }
        };
        NodeCollection.Add(node);

        ConnectorCollection = new ObservableCollection<DiagramConnector>();
        DiagramConnector connector = new DiagramConnector()
        {
            SourcePoint = new ConnectorSourcePoint() { X = 300, Y = 100 },
            TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 300 },
            Type = Segments.Orthogonal,
            Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7" },
            Annotations = new ObservableCollection<DiagramConnectorAnnotation>() { new DiagramConnectorAnnotation() { Content = "Connector" } }
        };

        ConnectorCollection.Add(connector);
    }
}

Annotation

Add annotations at runtime

  • Annotations can be added at runtime by using native [Add] method. The following code illustrates how to add an annotation to a node.

  • The annotation’s Id property is used to define the name of the annotation and its further used to find the annotation at runtime and do any customization.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" @ref="@diagram" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    // Reference to diagram
    SfDiagram diagram;
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node);
    }

    public async void AddLabel()
    {
        DiagramNodeAnnotation label = new DiagramNodeAnnotation() { Content = "Annotation" };
        diagram.Nodes[0].Annotations.Add(label);
    }
}

Remove annotation

A collection of annotations can be removed from the node by using native[RemoveAt] method. The following code illustrates how to remove an annotation to a node.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" @ref="@diagram" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Reference to diagram
    SfDiagram diagram;

    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Content = "Node" } },
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node);
    }
    public async void RemoveLabel()
    {
        diagram.Nodes[0].Annotations.RemoveAt(0);
    }
}

Update annotation at runtime

You can change any annotation properties at runtime and update it .

The following code example illustrates how to change the annotation properties.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" @ref="@diagram" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Reference to diagram
    SfDiagram diagram;

    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Content = "Node" } },
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node);
    }
    public async void Updatelabel()
    {
        diagram.Nodes[0].Annotations[0].Content = "Updated Annotation";
    }
}

Alignment

Annotation can be aligned relative to the node boundaries. It has Margin, Offset, HorizontalAlignment and VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives more control over alignment.

Offset

The offset property of annotation is used to align the annotations based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.

Set the size for a nodes annotation by using Width and Height properties.

The following code shows the relationship between the annotation position (black color circle) and offset (fraction values).

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection
    {
        get;
        set;
    }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            OffsetX = 100,
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() { Content = "Annotation", Offset = new NodeAnnotationOffset() { X = 0, Y = 1 } }
            },
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node);
    }
}

Horizontal and vertical alignment

The HorizontalAlignment property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The VerticalAlignment property is used to set how annotation is vertically aligned at the annotation position.

The following tables illustrates all the possible alignments visually with ‘offset (0, 0)‘.

Horizontal Alignment Vertical Alignment Output with Offset(0,0)
Left Top Left Top Label Alignment
Center Top Center Top Label Alignment
Right Top Right Top Label Alignment
Left Center Left Center Label Alignment
Center Center Center Center Label Alignment
Right Center Right Center Label Alignment
Left Bottom Left Bottom Label Alignment
Center Bottom Center Bottom Label Alignment
Right Bottom Right Bottom Label Alignment

The following codes illustrates how to align annotations.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 250,
            OffsetY = 250,
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() { Content = "Annotation", HorizontalAlignment = HorizontalAlignment.Left,VerticalAlignment = VerticalAlignment.Center}
            },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Annotation alignment with respect to segments

The offset and alignment properties of annotation allows you to align the connector annotations with respect to the segments.

The following code example illustrates how to align connector annotations.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
</SfDiagram>

@code
{
    //Defines diagram's connector collection
    public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Width = 100,
            Id = "node1",
            Height = 100,
            OffsetX = 100,
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() { Content = "Task1", Offset = new NodeAnnotationOffset() { X = 0, Y = 1 } }
            },
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);
        DiagramNode node2 = new DiagramNode()
        {
            Width = 100,
            Height = 100,
            Id = "node2",
            OffsetX = 300,
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() { Content = "Task2", Offset = new NodeAnnotationOffset() { X = 0, Y = 1 } }
            },
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node2);
        ConnectorCollection = new ObservableCollection<DiagramConnector>();
        DiagramConnector connector = new DiagramConnector()
        {
            SourceID = "node1",
            TargetID = "node2",
            Type = Segments.Orthogonal,
            Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 2 },
            Annotations = new ObservableCollection<DiagramConnectorAnnotation>() { new DiagramConnectorAnnotation() { Content = "0", Offset = 0 }, new DiagramConnectorAnnotation() { Content = "1", Offset = 1 } }
        };

        ConnectorCollection.Add(connector);
    }
}

Margin

Margin is an absolute value used to add some blank space in any one of its four sides. The annotations can be displaced with the margin property. The following code example illustrates how to align an annotation based on its Offset, HorizontalAlignment, VerticalAlignment, and Margin values.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            // Sets the margin for the content
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() { Content = "Task1", Margin = new NodeAnnotationMargin(){ Top = 10},
                    HorizontalAlignment = HorizontalAlignment.Center,VerticalAlignment = VerticalAlignment.Top,Offset = new NodeAnnotationOffset(){ X = .5 ,Y = 1} }
            },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Text align

The TextAlign property of annotation allows you to set how the text should be aligned (left, right, center, or justify) inside the text block. The following codes illustrate how to set TextAlign for an annotation.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            // Sets the textAlign as left for the content
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() { Content = "Text align is set as Left",Style = new AnnotationStyle(){ TextAlign = TextAlign.Left} }
            },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Diagram provides a support to add a Hyperlink for the nodes/connectors annotation. It can also be customized.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            // Sets the annotation for the Node
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() { Hyperlink = new NodeHyperlink(){ Link = "https://hr.syncfusion.com/home"} }
            },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Wrapping

When text overflows node boundaries, you can control it by using TextWrapping. So, it is wrapped into multiple lines. The wrapping property of annotation defines how the text should be wrapped. The following code illustrates how to wrap a text in a node.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            //Sets the annotation for the node
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() {Content = "Annotation Text Wrapping",Style = new AnnotationStyle(){ TextWrapping = TextWrap.Wrap} }
            },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}
Value Description Image
No Wrap Text will not be wrapped. Label No Wrap
Wrap Text-wrapping occurs, when the text overflows beyond the available node width. Label Wrap
WrapWithOverflow (Default) Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word. Label WrapWith Overflow

Text overflow

The label’s TextOverflow property is used control whether to display the overflowed content in node or not.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            // Sets the style for the text to be displayed
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() {Content = "Annotation Text",Style = new AnnotationStyle(){ TextOverflow = TextOverflow.Ellipsis} }
            },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Appearance

  • You can change the font style of the annotations with the font specific properties (FontSize, FontFamily, Color). The following code illustrates how to customize the appearance of the annotation.

  • The label’s Bold, Italic, and TextDecoration properties are used to style the label’s text.

  • The label’s Fill, StrokeColor, and StrokeWidth properties are used to define the background color and border color of the annotation and the Opacity property is used to define the transparency of the annotations.

  • The Visibility property of the annotation enables or disables the visibility of annotation.

The fill, border, and opacity appearances of the text can also be customized with appearance specific properties of annotation. The following code illustrates how to customize background, opacity, and border of the annotation.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            // Sets the annotation for the node
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() {Content = "Annotation Text",
                    Style = new AnnotationStyle(){Color="black",Bold = true,Italic = true,FontSize = 12,FontFamily = "TimesNewRoman"  } }
            },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Interaction

Diagram allows annotation to be interacted by selecting, dragging, rotating, and resizing. Annotation interaction is disabled, by default. You can enable annotation interaction with the Constraints property of annotation. You can also curtail the services of interaction by enabling either selecting, dragging, rotating, or resizing individually with the respective constraints property of annotation. The following code illustrates how to enable annotation interaction.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            // Sets the annotation for the node
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() {Content = "Annotation Text",Constraints = AnnotationConstraints.Interaction} },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Edit

Diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, annotation is in view mode. But it can be brought to edit mode in two ways;

  • Programmatically By using StartTextEdit method, edit the text through programmatically.

  • Interactively

    1. By double-clicking the annotation.
    2. By selecting the item and pressing the F2 key.

Double-clicking any annotation will enables editing and the node enables first annotation editing. When the focus of editor is lost, the annotation for the node is updated. When you double-click on the node/connector/diagram model, the DoubleClick event gets triggered.

Read-only annotations

Diagram allows to create read-only annotations. You have to set the read-only property of annotation to enable/disable the read-only Constraints. The following code illustrates how to enable read-only mode.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            //Sets the constraints as Read only
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() {Content = "Annotation Text",Constraints = AnnotationConstraints.ReadOnly} },

            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
        };
        NodeCollection.Add(node1);

    }
}

Drag Limit

  • The diagram control now supports defining the DragLimit to the label while dragging from the connector and also update the position to the nearest segment offset.

  • You can set the value to DragLimit Left, Right, Top, and Bottom properties which allow the dragging of connector labels to a certain limit based on the user defined values.

  • By default, drag limit will be disabled for the connector. It can be enabled by setting connector constraints as drag.

  • The following code illustrates how to set a DragLimit for connector annotations.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" 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 = 300 },
            TargetPoint = new ConnectorTargetPoint() { X = 400, Y = 400 },
            Type = Segments.Orthogonal,
            Style = new ConnectorShapeStyle() { StrokeColor = "#6BA5D7" },
            Annotations = new ObservableCollection<DiagramConnectorAnnotation>() { new DiagramConnectorAnnotation() { Content = "Connector" ,
            //Enables drag constraints for a connector.
            Constraints = AnnotationConstraints.Interaction|AnnotationConstraints.Drag,
            //Set drag limit for a connector annotation.
            DragLimit = new ConnectorAnnotationDragLimit(){Left = 20,Right = 20,Top = 20,Bottom=20}
            } }
        };

        ConnectorCollection.Add(connector);

    }
}

Multiple annotations

You can add any number of annotations to a node or connector. The following code illustrates how to add multiple annotations to a node.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Width="500px" Height="500px" Nodes="@NodeCollection">
</SfDiagram>

@code
{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node1 = new DiagramNode()
        {
            Id = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" },
            // Sets the multiple annotation for the node
            Annotations = new ObservableCollection<DiagramNodeAnnotation>() {
                new DiagramNodeAnnotation() {Content = "Left",Offset = new NodeAnnotationOffset(){ X = .12,Y = .1} },
            new DiagramNodeAnnotation() {Content = "Center",Offset = new NodeAnnotationOffset(){ X = .5,Y = .5} },
            new DiagramNodeAnnotation() {Content = "Right",Offset = new NodeAnnotationOffset(){ X = .82,Y = .9} }
            },


        };
        NodeCollection.Add(node1);

    }
}

Multiple Annotations

Constraints

The constraints property of annotation allows you to enable/disable certain annotation behaviors. For instance, you can disable annotation editing.