selection.md

title	<Selection />, <Halo /> and <HaloLink />

Halo and Selection

There are several canvas widget components which can be used to display actions on the selected diagram elements or links.

Selecting elements

<Halo /> widget allows selecting a single element to perform an element action on it.

<Selection /> widget allows selecting more than one element via rectangular selection box to move them together and perform an element action on them.

There are several built-in element actions that can be used:

Action component	Description
<SelectionAction />	Base component to display a custom element action.
<SelectionActionSpinner />	Displays a loading spinner (useful as building block for other action components).
<SelectionActionRemove />	Removes an element from the diagram.
<SelectionActionZoomToFit />	Zooms-in or zooms-out the viewport to fit all selected elements.
<SelectionActionLayout />	Performs graph layout algorithm on the sub-graph formed from the selected elements.
<SelectionActionExpand />	Toggles expanded state for the selected elements.
<SelectionActionAnchor />	Displays a link to the entity IRI.
<SelectionActionConnections />	Opens the connections menu for the selected entities.
<SelectionActionAddToFilter />	Adds the selected entity to the instances search filter.
<SelectionActionGroup />	Groups or ungroups selected elements.
<SelectionActionEstablishLink />	Starts creating a relation or annotation link to an element by dragging it.
<SelectionActionAnnotate />	Creates a new annotaion connected to the selected elements.

Selecting links

<HaloLink /> widget allows selecting a single link to perform a link action on it.

There are several built-in link actions that can be used:

Action component	Description
<LinkAction />	Base component to display an action on the selected link. useLinkActionContext() hook can be used to get additional context for the selected link, including path geometry.
<LinkActionSpinner />	Displays a loading spinner (useful as building block for other action components).
<LinkActionEdit />	Starts editing the relation.
<LinkActionDelete />	Deletes the relation or annotation link.
<LinkActionMoveEndpoint />	Displays a handle which allows to change the relation or annotation link by moving its endpoint (source or target) to another element.
<LinkActionRename />	Starts renaming a link (change the label on the diagram only).

Styles

The component look can be customized using the following CSS properties (see design system for more information):

Property	Description
--reactodia-selection-icon-filter	CSS filter for the element selection action icons.
--reactodia-selection-link-color	Link path highlight color when a link is selected.
--reactodia-selection-multiple-box-shadow	Box shadow for the selection rectangle with multiple elements.
--reactodia-selection-single-box-color	Rectangle border color for selection with a single element.
--reactodia-selection-single-box-margin	Margin from the element bounds for the selection rectange with a single element.
--reactodia-selection-single-box-shadow	Box shadow for the selection rectangle with a single element.