节点选择和多项选择

演示各种节点选择模式，包括单项选择、多项选择和框选，以及操作处理。

节点选择和多项选择

功能概述

本示例演示各种节点选择模式，包括单项选择、多项选择和框选。它展示了如何处理选定的节点并对选择执行操作。

核心特性实现

选择模式

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

选择处理

const onNodeClick = (node: RGNode, $event: RGUserEvent) => {
    // 处理节点选择
    const isCtrlPressed = $event.ctrlKey || $event.metaKey;
    if (isCtrlPressed) {
        // 多选
        graphInstance.setCheckedNode(node.id, true);
    } else {
        // 单选
        graphInstance.setCheckedNode(node.id);
    }
};

框选

允许用户拖动选择框一次选择多个节点。

创意使用场景

批量操作：选择多个节点进行批量编辑。批量更新或删除。

比较分析：选择多个节点以比较属性。并排比较。

组操作：对选定的节点组应用操作。批量格式化或状态更改。

导出选择：导出选定节点及其数据。部分数据导出。

路径分析：选择形成路径或路线的节点。路线可视化。

聚类选择：选择节点聚类进行分析。聚类操作。

多项目编辑：同时编辑多个项目。提高编辑效率。

协作选择：突出显示选择以供团队讨论。协作分析。