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.
SelectionChangedevent 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.
OnPositionChangeevent gets triggered and to do customization in this event.
OnSizeChangeevent gets triggered.
Note: While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to
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.
ConnectionChangeevent 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.
UserHandlescollection of the
User handles can be aligned relative to the node boundaries. It has
VerticalAlignment settings. It is quite tricky when all four alignments are used together but gives more control over alignment.
HorizontalAlignment property of
UserHandles is used to set how the user handle is horizontally aligned at the position based on the
VerticalAlignment property is used to set how user handle is vertically aligned at the position.
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,
|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|
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.
|Ctrl + A||
||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).|
|Ctrl + MouseWheel||Zoom||Zoom (Zoom in/Zoom out the diagram).|
||Starts to edit the label of selected element.|
||Sets the label mode as view and stops editing.|