When the mouse clicks on an element, you can activate the state of the element, such as selecting nodes or edges. When the degree is 1, clicking on a node will highlight the current node and its directly adjacent nodes and edges.

Options

key

string

Behavior key, that is, the unique identifier

Used to identify the behavior for further operations

// Update behavior options
graph.updateBehavior({key: 'key', ...});

Required type

string

Behavior type

animation

boolean Default: true

Whether to enable animation

degree

number | ((event: Event) => number) Default: 0

The degree to determine the scope of influence

For nodes, 0 means only the current node is selected, 1 means the current node and its directly adjacent nodes and edges are selected, etc.

For edges, 0 means only the current edge is selected,1 means the current edge and its directly adjacent nodes are selected, etc.

enable

boolean | ((event: Event) => boolean) Default: true

Whether to enable the function of clicking the element

Whether to enable can be dynamically controlled by functions, such as only when nodes are selected.

{
  enable: (event) => event.targetType === 'node';
}

multiple

boolean Default: false

Whether to allow multiple selection

neighborState

string Default: 'selected'

The state to be applied to the neighboring elements within n degrees when an element is selected. The value of n is controlled by the degree property, for instance, a degree of 1 indicates direct neighbors

onClick

(event: Event) => void

Callback when the element is clicked

state

string Default: 'selected'

The state to be applied when an element is selected

trigger

string[] Default: ['shift']

Press this shortcut key to apply multiple selection with mouse click

unselectedState

string

The state to be applied to all unselected elements when some elements are selected, excluding the selected element and its affected neighbors

API

ClickSelect.destroy()

destroy(): void;