Annotation Events in Blazor Diagram Component
9 Jul 202615 minutes to read
How to Handle Annotation Selection Change Event
The annotation selection events are triggered when an annotation is selected or unselected. These events can be used to validate selection changes and apply custom styles.
| Event Name | Arguments | Description |
|---|---|---|
| SelectionChanging | SelectionChangingEventArgs | Triggers before the annotation selection is changed. Set args.Cancel to true to prevent the change. |
| SelectionChanged | SelectionChangedEventArgs | Triggers after the annotation selection is changed. |
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@_nodes" SelectionChanging="OnSelectionChanging" SelectionChanged="OnSelectionChanged" />
@code
{
private DiagramObjectCollection<Node> _nodes;
protected override void OnInitialized()
{
_nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "node1",
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white"
},
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation
{
Content = "Selectable Annotation",
Constraints = AnnotationConstraints.Select
}
}
};
_nodes.Add(node);
}
// Event triggered before annotation selection changes
private void OnSelectionChanging(SelectionChangingEventArgs args)
{
// Prevent annotation selection if needed
// args.Cancel = true;
Console.WriteLine("Annotation selection changing");
}
// Event triggered after annotation selection changes
private void OnSelectionChanged(SelectionChangedEventArgs args)
{
Console.WriteLine("Annotation selection changed");
}
}A complete working sample can be downloaded from GitHub
How to Handle Annotation Position Change Event
The annotation position change events are triggered when an annotation is dragged. These events can be used to track movement in real time, restrict annotation movement, or save the updated position.
| Event Name | Arguments | Description |
|---|---|---|
| PositionChanging | PositionChangingEventArgs | Triggers continuously while the annotation is being dragged. Set args.Cancel to true to prevent the move. |
| PositionChanged | PositionChangedEventArgs | Triggers once when the annotation drag operation completes. |
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@_nodes" PositionChanging="OnPositionChanging" PositionChanged="OnPositionChanged" />
@code
{
private DiagramObjectCollection<Node> _nodes;
protected override void OnInitialized()
{
_nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "node1",
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100,
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "white"
},
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation
{
Content = "Draggable Annotation",
Constraints = AnnotationConstraints.Select | AnnotationConstraints.Drag
}
}
};
_nodes.Add(node);
}
// Event triggered while dragging the annotation
private void OnPositionChanging(PositionChangingEventArgs args)
{
// Prevent position change if needed
// args.Cancel = true;
Console.WriteLine("Annotation position changing");
}
// Event triggered after annotation position changes
private void OnPositionChanged(PositionChangedEventArgs args)
{
Console.WriteLine("Annotation position changed");
}
}A complete working sample can be downloaded from GitHub
How to Handle Annotation Size Change Event
The annotation size change events are triggered when an annotation is resized. These events can be used to restrict annotation dimensions and track size changes.
| Event Name | Arguments | Description |
|---|---|---|
| SizeChanging | SizeChangingEventArgs | Triggers continuously while the annotation is being resized. Set args.Cancel to true to prevent the resize. |
| SizeChanged | SizeChangedEventArgs | Triggers once when the annotation resize operation completes. |
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@_nodes" SizeChanged="OnSizeChanged" SizeChanging="OnSizeChanging"/>
@code
{
private DiagramObjectCollection<Node> _nodes;
protected override void OnInitialized()
{
_nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "node1",
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white"
},
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation
{
Content = "Resizable Annotation",
Width = 80,
Height = 40,
Constraints = AnnotationConstraints.Select | AnnotationConstraints.Resize
}
}
};
_nodes.Add(node);
}
// Event triggered before annotation size changes
private void OnSizeChanging(SizeChangingEventArgs args)
{
// Prevent size change if needed
// args.Cancel = true;
Console.WriteLine("Annotation size changing");
}
// Event triggered after annotation size changes
private void OnSizeChanged(SizeChangedEventArgs args)
{
Console.WriteLine("Annotation size changed");
}
}A complete working sample can be downloaded from GitHub
How to Handle Annotation Rotation Change Event
The annotation rotation change events are triggered when an annotation is rotated. These events can be used to snap rotation to predefined angles, constrain the rotation range, or save the updated rotation angle.
| Event Name | Arguments | Description |
|---|---|---|
| RotationChanging | RotationChangingEventArgs | Triggers continuously while the annotation is being rotated. Set args.Cancel to true to prevent the rotation. |
| RotationChanged | RotationChangedEventArgs | Triggers once when the annotation rotation operation completes. |
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@_nodes" RotationChanging="OnRotateChanging" RotationChanged="OnRotateChanged" />
@code
{
// To define node collection.
private DiagramObjectCollection<Node> _nodes;
protected override void OnInitialized()
{
_nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "node1",
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white"
},
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation
{
Content = "Rotatable Annotation",
Constraints = AnnotationConstraints.Select | AnnotationConstraints.Rotate
}
}
};
_nodes.Add(node);
}
// Event triggered before annotation rotation changes
private void OnRotateChanging(RotationChangingEventArgs args)
{
// Prevent rotation if needed
// args.Cancel = true;
Console.WriteLine("Annotation rotation changing");
}
// Event triggered after annotation rotation changes
private void OnRotateChanged(RotationChangedEventArgs args)
{
Console.WriteLine("Annotation rotation changed");
}
}A complete working sample can be downloaded from GitHub
How to Handle Text Change Event
The following events are triggered when a node’s or connector’s annotation text is edited in the diagram. Use these events to apply custom behavior during annotation text editing.
| Event Name | Arguments | Description |
|---|---|---|
| TextChanged | TextChangeEventArgs | Triggers after a node or connector’s annotation text has been changed in the diagram. |
| TextChanging | TextChangeEventArgs | An event that is raised when the node and connector’s annotation text is changing in the diagram. |
The following code example shows how to register and get notifications from the TextChanged and TextChanging events.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent TextChanging="@OnLabelTextChanging" Height="600px" TextChanged="@OnTextChanged" Nodes="@_nodes" />
@code
{
// Defines diagram's nodes collection.
DiagramObjectCollection<Node> _nodes;
// Triggered when the node and connector's labels change in the diagram.
private void OnLabelTextChanging(TextChangeEventArgs args)
{
args.Cancel = true;
}
// Triggered when annotation editing is complete; provides the old and new text values.
private void OnTextChanged(TextChangeEventArgs args)
{
Console.WriteLine("OldValue", args.OldValue);
Console.WriteLine("NewValue", args.NewValue);
}
protected override void OnInitialized()
{
_nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
};
node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation { Content = "Annotation" }
};
_nodes.Add(node);
}
}A complete working sample can be downloaded from GitHub