Selection in diagram

3 Jan 20231 minute to read

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.

Single selection

An element can be selected by clicking that element. During single click, all previously selected items are cleared.

• While selecting the diagram elements, the following events can be used to do your customization.
• When selecting or unselecting the diagram elements, the selectionChange event gets triggered.

Selecting a group

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 selection

Multiple elements can be selected with the following ways:

• Ctrl+Click - During single click, any existing item in the selection list will be cleared, and only the item clicked recently will be there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking.

• Selection rectangle/rubber band selection - 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.

Select/Unselect elements using program

The client-side methods select and clearSelection helps 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.

Select entire elements in diagram programmatically

The client-side method selectAll is 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.