节点和连线提示与上下文菜单

演示节点和连线的悬停提示和右键上下文菜单，使用视口坐标定位并通过 RGSlotOnView 渲染以支持全屏模式。

节点和连线提示与上下文菜单

功能概述

本示例演示如何为节点和连线实现悬停提示和右键上下文菜单。提示和菜单使用视口相对坐标定位，并通过 RGSlotOnView 渲染，确保即使在全屏模式下也保持可见。

核心特性实现

鼠标移动跟踪以显示提示

const onMouseMove = ($event: React.MouseEvent) => {
    const el = $event.target as HTMLElement;
    const node = graphInstance.isNode(el);
    const viewRect = graphInstance.getViewBoundingClientRect();
    const position = {
        x: $event.clientX - viewRect.left + 10,
        y: $event.clientY - viewRect.top + 10
    };

    if (node) {
        setCurrentNode(node);
        setNodeTipsPosition(position);
        setIsShowNodeTips(true);
        setIsShowLineTips(false);
    } else {
        setIsShowNodeTips(false);
        const line = graphInstance.isLine(el);
        if (line) {
            const link = graphInstance.getLinkByLine(line);
            if (link) {
                setCurrentLink(link);
                setCurrentLine(line);
                setLineTipsPosition(position);
                setIsShowLineTips(true);
            }
        } else {
            setIsShowLineTips(false);
        }
    }
};

上下文菜单处理器

const onContextmenu = ($event: RGUserEvent, objectType: RGEventTargetType, object: RGNode | RGLine | undefined) => {
    hideAllPanel();
    const viewRect = graphInstance.getViewBoundingClientRect();
    const position = {
        x: event.clientX - viewRect.left + 10,
        y: event.clientY - viewRect.top + 10
    };

    if (objectType === 'node' && object) {
        const node = object as RGNode;
        graphInstance.setCheckedNode(node.id);
        setCurrentNode(node);
        setNodeMenuPanelPosition(position);
        setIsShowNodeMenuPanel(true);
    } else if (objectType === 'line' && object) {
        const line = object as RGLine;
        const link = graphInstance.getLinkByLine(line);
        if (link) {
            setCurrentLink(link);
            setCurrentLine(line);
            setLineMenuPosition(position);
            setIsShowLineMenuPanel(true);
        }
    }
};

在视图插槽中渲染

<RGSlotOnView>
    {isShowNodeTips && (
        <div className="c-tips" style={{ left: nodeTipsPosition.x, top: nodeTipsPosition.y }}>
            <div>NodeId: {currentNode?.text}</div>
            <div>Icon: {currentNode?.data?.myicon}</div>
        </div>
    )}
    {isShowLineTips && (
        <div className="c-tips" style={{ left: lineTipsPosition.x, top: lineTipsPosition.y }}>
            <div>Text: {currentLine?.text}</div>
            <div>From: {currentLink?.fromNode.text}</div>
            <div>To: {currentLink?.toNode.text}</div>
        </div>
    )}
</RGSlotOnView>

创意使用场景

知识图谱：悬停显示实体详细信息，通过上下文菜单显示关系编辑选项。用户可以快速检查和修改图谱结构。

网络管理：在提示中显示设备状态和连接详细信息。上下文菜单提供快速访问配置和故障排除选项。

流程自动化：悬停在流程节点上查看当前状态和指标。右键单击可访问启动、停止或重新配置流程等操作。

社交网络：悬停显示用户个人资料信息。上下文菜单提供发送消息、关注或查看连接等操作。

供应链管理：悬停显示库存水平和供应商信息。上下文菜单启用快速重新订购或供应商切换。

项目管理：悬停在任务上查看详细信息和进度。右键单击可更改状态、分配资源或设置依赖关系。

代码依赖关系可视化：悬停显示函数/类详细信息。上下文菜单提供导航到定义或重构选项。