高级线条和节点高亮

演示线条单击高亮以及连接节点和画布单击处理，以实现清晰的选择管理。

高级线条和节点高亮

功能概述

此示例演示了高级高亮技术，其中单击线条会同时高亮该线条及其连接的节点。它还包括画布单击处理以清除选择。

核心特性实现

1. 线条点击处理

实现 onLineClick 以高亮单击的线条及其端点：

const onLineClick = (clickedLine: RGLine) => {
    clearHighlightStatus();

    // 高亮单击的线条
    graphInstance.getLines().forEach(line => {
        if (clickedLine.id === line.id) {
            graphInstance.updateLine(line, {
                className: 'my-line-highlight',
                lineWidth: 3
            });
        }
    });

    // 高亮连接的节点
    graphInstance.getNodes().forEach(node => {
        if (clickedLine.from === node.id || clickedLine.to === node.id) {
            graphInstance.updateNode(node, { className: 'my-node-highlight' });
        }
    });
};

2. 画布单击处理

单击画布时清除所有高亮：

const onCanvasClick = () => {
    graphInstance.clearChecked();
    clearHighlightStatus();
};

3. 清除高亮函数

重置所有视觉修改：

const clearHighlightStatus = () => {
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNode(node, { className: '' });
    });
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            className: '',
            lineWidth: graphOptions.defaultLineWidth
        });
    });
};

4. 切换高亮状态

该演示维护类似切换的状态，其中：

• 首次单击线条会高亮它及其节点
• 单击其他位置会清除高亮
• 画布单击也会清除选择

5. CSS 视觉反馈

使用 CSS 类进行高亮效果：

.my-line-highlight {
    stroke: #4CAF50 !important;
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.5));
}
.my-node-highlight {
    background-color: #FFD700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

创意使用场景

• 边选择：在图分析工具中选择关系
• 路径可视化：在网络图中突出显示特定路径
• 连接检查：检查特定连接的详细信息
• 交互式报告：创建基于图的交互式报告
• 质量保证：验证系统架构图中的连接
• 教育工具：通过交互式高亮教授图概念