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 hook accepts the following:


export type HotkeyTypes = 'selectAll' | 'deselect' | 'delete';
export type PathSelectionTypes = 'direct' | 'out' | 'in' | 'all';
export type SelectionTypes = 'single' | 'multi' | 'multiModifier';
 
export interface SelectionProps {
  /**
   * Required ref for the graph.
   */
  ref: RefObject<GraphCanvasRef | null>;
 
  /**
   * Current selections.
   *
   * Contains both nodes and edges ids.
   */
  selections?: string[];
 
  /**
   * Default active selections.
   */
  actives?: string[];
 
  /**
   * Node datas.
   */
  nodes?: GraphNode[];
 
  /**
   * Edge datas.
   */
  edges?: GraphEdge[];
 
  /**
   * Disabled or not.
   */
  disabled?: boolean;
 
  /**
   * Hotkey types
   */
  hotkeys?: HotkeyTypes[];
 
  /**
   * Whether to focus on select or not.
   */
  focusOnSelect?: boolean | 'singleOnly';
 
  /**
   * Type of selection.
   */
  type?: SelectionTypes;
 
  /**
   * Type of selection.
   */
  pathSelectionType?: PathSelectionTypes;
 
  /**
   * On selection change.
   */
  onSelection?: (selectionIds: string[]) => void;
}

and returns the following:


export interface SelectionResult {
  /**
   * Selections id array (of nodes and edges).
   */
  selections: string[];
 
  /**
   * The nodes/edges around the selections to highlight.
   */
  actives: string[];
 
  /**
   * Clear selections method.
   */
  clearSelections: (value?: string[]) => void;
 
  /**
   * A selection method.
   */
  addSelection: (value: string) => void;
 
  /**
   * Get the paths between two nodes.
   */
  selectNodePaths: (source: string, target: string) => void;
 
  /**
   * Remove selection method.
   */
  removeSelection: (value: string) => void;
 
  /**
   * Toggle existing selection on/off method.
   */
  toggleSelection: (value: string) => void;
 
  /**
   * Set internal selections.
   */
  setSelections: (value: string[]) => void;
 
  /**
   * On click event pass through.
   */
  onNodeClick?: (data: GraphNode) => void;
 
  /**
   * On canvas click event pass through.
   */
  onCanvasClick?: (event: MouseEvent) => void;
}

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']}
  />
);