Selection

Out of the box, reagraph supports selection handled either manually or via the useSelection hook.

`useSelection`

The useSelection hook will automatically manage selection state and bind some hotkeys for you.

Interfaces

The following selection types are used below:


export type HotkeyTypes = 'selectAll' | 'deselect' | 'delete';
export type PathSelectionTypes = 'direct' | 'out' | 'in' | 'all';
export type SelectionTypes = 'single' | 'multi' | 'multiModifier';

The hook accepts SelectionProps:

Name	Type	Default
`ref`	`RefObject<GraphCanvasRef \| null>` Required ref for the graph.
`selections`	`string[]` Current selections. Contains both nodes and edges ids.	`[]`
`actives`	`string[]` Default active selections.	`[]`
`nodes`	`GraphNode[]` Node datas.	`[]`
`edges`	`GraphEdge[]` Edge datas.
`disabled`	`boolean` Disabled or not.
`focusOnSelect`	`boolean \| "singleOnly"` Whether to focus on select or not.	`true`
`type`	`SelectionTypes` Type of selection.	`'single'`
`pathSelectionType`	`PathSelectionTypes` Type of path selection.	`'direct'`
`pathHoverType`	`PathSelectionTypes` Whether it should active on hover or not.	`'out'`
`onSelection`	`(selectionIds: string[]) => void` On selection change.

and returns SelectionResult:

Name	Type	Default
`selections`	`string[]` Selections id array (of nodes and edges).
`actives`	`string[]` The nodes/edges around the selections to highlight.
`clearSelections`	`(value?: string[] \| undefined) => void` Clear selections method.
`addSelection`	`(value: string) => void` A selection method.
`selectNodePaths`	`(source: string, target: string) => void` Get the paths between two nodes.
`removeSelection`	`(value: string) => void` Remove selection method.
`toggleSelection`	`(value: string) => void` Toggle existing selection on/off method.
`setSelections`	`(value: string[]) => void` Set internal selections.
`onNodeClick`	`(data: GraphNode) => void` On click event pass through.
`onCanvasClick`	`(event: MouseEvent) => void` On canvas click event pass through.
`onLasso`	`(selections: string[]) => void` When the lasso happened.
`onLassoEnd`	`(selections: string[]) => void` When the lasso ended.
`onNodePointerOver`	`(node: GraphNode) => void` When node got a pointer over.
`onNodePointerOut`	`(node: GraphNode) => void` When node lost pointer over.

Hotkeys

The hotkeys that are bound via this hook are:

ctrl/meta + a: Select all nodes
escape: Defoucs selections
ctrl/meta + click: Toggle node selection

Example

A typical example might look like:


import { GraphCanvas, GraphCanvasRef, useSelection } from 'reagraph';
 
export const App = () => {
  const graphRef = useRef<GraphCanvasRef | null>(null);
  const { selections, onNodeClick, onCanvasClick } = useSelection({
    ref: graphRef,
    nodes: myNodes,
    edges: myEdges
  });
 
  return (
    <GraphCanvas
      ref={graphRef}
      nodes={myNodes}
      edges={myEdges}
      selections={selections}
      onCanvasClick={onCanvasClick}
      onNodeClick={onNodeClick}
    />
  );
};

Manual Selection

If you don’t wish to use the useSelection hook you can handle the selections yourself manually via passing down a string[] of ids to the selections prop.


export const App = () => (
  <GraphCanvas
    nodes={complexNodes}
    edges={complexEdges}
    selections={['node-id-1']}
  />
);