手动定位的节点菜单

演示使用手动事件处理和相对于图形容器的位置计算来实现节点上下文菜单。

手动定位的节点菜单

功能概述

本示例演示了另一种实现节点上下文菜单的方法，使用手动事件处理和位置计算。菜单在点击和右键单击（上下文菜单）事件上显示，位置相对于图形容器。

核心特性实现

手动菜单位置计算

const showNodeMenus = (node: RGNode, $event: React.MouseEvent<HTMLDivElement>) => {
    setCurrentNode(node);
    if (myPage.current) {
        const _base_position = myPage.current.getBoundingClientRect();
        setIsShowNodeMenuPanel(true);
        setNodeMenuPanelPosition({
            x: $event.clientX - _base_position.x,
            y: $event.clientY - _base_position.y
        });
    }
    $event.stopPropagation();
    $event.preventDefault();
};

节点插槽中的事件处理器

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div
            className="c-my-rg-node"
            onClick={(event) => showNodeMenus(node, event)}
            onContextMenu={(event) => showNodeMenus(node, event)}
        >
            <NodeIcon name={node.data?.myicon} />
            <div style={{ /* text styling */ }}>
                {node.data?.myicon}
            </div>
        </div>
    )}
</RGSlotOnNode>

带指针事件的菜单渲染

<RGSlotOnView>
    {isShowNodeMenuPanel && (
        <div
            className="pointer-events-auto context-menu-panel"
            style={{ left: nodeMenuPanelPosition.x, top: nodeMenuPanelPosition.y }}
            onClick={(e) => e.stopPropagation()}
        >
            <div className="py-1 px-2 text-gray-400 text-xs border-b">
                Node Actions:
            </div>
            {['Action 1', 'Action 2', 'Action 3', 'Action 4'].map((action) => (
                <div key={action} className="menu-item" onClick={() => doAction(action)}>
                    {action}
                </div>
            ))}
        </div>
    )}
</RGSlotOnView>

创意使用场景

交互式仪表盘：节点代表仪表盘小部件。单击打开菜单，提供小部件特定操作，如配置、刷新、导出数据或删除。

组织架构图：员工节点显示菜单，提供查看资料、直接报告、发送消息或查看绩效指标等操作。

网络拓扑图：设备节点提供配置、监控、诊断或连接管理等菜单。

流程图：任务节点提供状态更新、分配、添加依赖关系或查看历史的菜单。

思维导图：概念节点显示格式选项、图标选择、颜色更改或附件管理。

社交网络分析：用户节点显示查看连接、分析影响力、发送消息或查看资料详情等操作。

库存管理：产品节点提供库存调整、供应商信息、价格更新或销售历史的菜单选项。