Node Selection and Multiple Selection

Demonstrates various node selection modes including single selection, multiple selection, and box selection with action handling.

Node Selection and Multiple Selection

Functional Overview

This example demonstrates various node selection modes including single selection, multiple selection, and box selection. It shows how to handle selected nodes and perform actions on selections.

Implementation of Key Features

Selection Modes

const graphOptions: RGOptions = {
    disableDragNode: false,
    disableZoom: false,
    disableDragCanvas: false
};

Selection Handling

const onNodeClick = (node: RGNode, $event: RGUserEvent) => {
    // Handle node selection
    const isCtrlPressed = $event.ctrlKey || $event.metaKey;
    if (isCtrlPressed) {
        // Multi-select
        graphInstance.setCheckedNode(node.id, true);
    } else {
        // Single select
        graphInstance.setCheckedNode(node.id);
    }
};

Box Selection

Enable users to drag a selection box to select multiple nodes at once.

Creative Use Cases

Batch Operations: Select multiple nodes for batch editing. Bulk updates or deletions.

Comparative Analysis: Select multiple nodes to compare properties. Side-by-side comparison.

Group Actions: Apply actions to selected node groups. Bulk formatting or status changes.

Export Selections: Export selected nodes and their data. Partial data export.

Path Analysis: Select nodes forming a path or route. Route visualization.

Cluster Selection: Select node clusters for analysis. Cluster operations.

Multi-Item Editing: Edit multiple items simultaneously. Efficiency in editing.

Collaborative Selection: Highlight selections for team discussion. Collaborative analysis.