Selector provides a visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction and by using program. Single or multiple elements can be selected at a time.
An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented.
SelectionChanged
event gets triggered.When a child element of any group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, selection is changed from top to bottom in the hierarchy of parent group to its children.
Multiple elements can be selected with the following ways:
During single click, any existing item in the selection list be cleared, and only the item clicked recently is there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking.
Clicking and dragging the diagram area allows to create a rectangular region. The elements that are covered under the rectangular region are selected at the end.
The server-side methods Select
and ClearSelection
help to select or clear the selection of the elements at runtime.
Get the current selected items from the Nodes
and Connectors
collection of the SelectedItems
property of the diagram model.
The server-side method SelectAll
used to select all the elements such as nodes/connectors in the diagram. Refer to the following link which shows how to use SelectAll
method on the diagram.
OnPositionChange
event gets triggered and to do customization in this event.OnSizeChange
event gets triggered.Note: While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to Snapping
.
Source and target points of the selected connectors are represented with two handles. Clicking and dragging those handles help you to adjust the source and target points.
ConnectionChange
event gets triggered.Diagram provides support to drop a node/connector over another node/connector. The OnDrop
event is raised to notify that an element is dropped over another one and it is disabled, by default. It can enabled with the constraints property.
UserHandles
collection of the SelectedItems
property.User handles can be aligned relative to the node boundaries. It has Margin
, Offset
, Side
, HorizontalAlignment
, and VerticalAlignment
settings. It is quite tricky when all four alignments are used together but gives more control over alignment.
The Offset
property of UserHandles
is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.
The Side
property of UserHandles
is used to align the user handle by using the Top
, Bottom
, Left
, and Right
options.
The HorizontalAlignment
property of UserHandles
is used to set how the user handle is horizontally aligned at the position based on the Offset
. The VerticalAlignment
property is used to set how user handle is vertically aligned at the position.
Margin is an absolute value used to add some blank space in any one of its four sides. The UserHandles
can be displaced with the Margin
property.
The diagram component notifies the mouse button clicked. For example, whenever the right mouse button is clicked, the clicked button is notified as right. The mouse click is notified with,
Notification | Description |
---|---|
Left | When the left mouse button is clicked, left is notified |
Middle | When the mouse wheel is clicked, middle is notified |
Right | When the right mouse button is clicked, right is notified |
@using Syncfusion.Blazor.Diagrams
@using Syncfusion.Blazor.Navigations
@using System.Collections.ObjectModel
<h2>Diagram</h2>
<br />
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
<link href="https://ej2.syncfusion.com/javascript/demos/src/diagram/styles/diagram-common.css" rel="stylesheet">
<SfDiagram Height="600px" Nodes="@NodeCollection" @onclick='@Click'>
</SfDiagram>
@code{
public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
string greeting;
protected override void OnInitialized()
{
// A node is created and stored in nodes array.
DiagramNode node1 = new DiagramNode()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
// Add node
Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 },
};
NodeCollection.Add(node1);
}
private async void Click()
{
//Sets the export option for diagram
IBlazorClickEventArgs options = new IBlazorClickEventArgs()
{
Console.WriteLine("Button", options.MouseButtons);
};
}}
The appearance of the user handle can be customized by using the Size
, BorderColor
, BackgroundColor
, Visible
, PathData
, and PathColor
properties of the UserHandles
.
Diagram provides support to interact with the elements with key gestures. By default, some in-built commands are bound with a relevant set of key combinations.
The following table illustrates those commands with the associated key values.
Shortcut Key | Command | Description |
---|---|---|
Ctrl + A | SelectAll |
Select all nodes/connectors in the diagram. |
Ctrl + C | Copy | Copy the diagram selected elements. |
Ctrl + V | Paste | Pastes the copied elements. |
Ctrl + X | Cut | Cuts the selected elements. |
Ctrl + Z | Undo | Reverses the last editing action performed on the diagram. |
Ctrl + Y | Redo | Restores the last editing action when no other actions have occurred since the last undo on the diagram. |
Delete | Delete | Deletes the selected elements. |
Ctrl/Shift + Click on object | Multiple selection (Selector binds all selected nodes/connectors). | |
Up Arrow | Nudge(“up”) | NudgeUp : Moves the selected elements towards up by one pixel. |
Down Arrow | Nudge(“down”) | NudgeDown : Moves the selected elements towards down by one pixel. |
Left Arrow | Nudge(“left”) | NudgeLeft : Moves the selected elements towards left by one pixel. |
Right Arrow | Nudge(“right”) | NudgeRight : Moves the selected elements towards right by one pixel. |
Ctrl + MouseWheel | Zoom | Zoom (Zoom in/Zoom out the diagram). |
F2 | StartLabelEditing |
Starts to edit the label of selected element. |
Esc | EndLabelEditing |
Sets the label mode as view and stops editing. |