节点上下文菜单

演示上下文菜单实现，根据目标类型（节点、连线或画布）提供动态操作，使用 eventPositionOnView 准确定位。

节点上下文菜单

功能概述

本示例演示如何为节点实现上下文菜单，根据目标类型（节点、连线或画布）提供不同的操作。菜单通过 RGSlotOnView 渲染，并使用上下文菜单事件处理器中的 eventPositionOnView 进行定位。

核心特性实现

带视图位置的上下文菜单处理器

const onContextmenu = (
    e: RGUserEvent,
    objectType: RGEventTargetType,
    object: RGNode | RGLine | undefined,
    eventPositionOnCanvas: RGCoordinate,
    eventPositionOnView: RGCoordinate
) => {
    setMenuTarget({ type: objectType, data: object });
    // 直接使用 eventPositionOnView 设置菜单位置
    setMenuPosition({ x: eventPositionOnView.x, y: eventPositionOnView.y });
    setIsShowMenu(true);
};

基于目标类型的动态菜单操作

<RGSlotOnView>
    {isShowMenu && (
        <div
            className="pointer-events-auto context-menu-panel"
            style={{ left: menuPosition.x, top: menuPosition.y }}
            onClick={(e) => e.stopPropagation()}
        >
            <div className="menu-header">
                {menuTarget?.type === 'node' && 'Node Menu'}
                {menuTarget?.type === 'line' && 'Line Menu'}
                {menuTarget?.type === 'canvas' && 'Canvas Menu'}
            </div>

            {/* 选项 1：查看详情 */}
            <div className="menu-item" onClick={() => doMenuAction('View Details')}>
                <Info size={16} /> View Details
            </div>

            {/* 选项 2：特定类型的操作 */}
            {menuTarget?.type === 'node' && (
                <div className="menu-item" onClick={() => doMenuAction('Edit Node')}>
                    <Edit size={16} /> Edit Node
                </div>
            )}
            {menuTarget?.type === 'line' && (
                <div className="menu-item" onClick={() => doMenuAction('Change Color')}>
                    <Edit size={16} /> Change Color
                </div>
            )}
            {menuTarget?.type === 'canvas' && (
                <div className="menu-item" onClick={() => doMenuAction('Add New Node')}>
                    <Plus size={16} /> Add New Node
                </div>
            )}

            {/* 选项 3：通用操作 */}
            {menuTarget?.type === 'canvas' ? (
                <div className="menu-item" onClick={() => doMenuAction('Reset Zoom')}>
                    <ZoomIn size={16} /> Reset Zoom
                </div>
            ) : (
                <div className="menu-item" onClick={() => doMenuAction('Delete')}>
                    <Trash2 size={16} /> Delete
                </div>
            )}
        </div>
    )}
</RGSlotOnView>

操作处理器

const doMenuAction = (action: string) => {
    const targetName = menuTarget?.type === 'canvas' ? 'Canvas' : (menuTarget?.data as any)?.text || menuTarget?.type;
    SimpleGlobalMessage.showMessage({
        message: `Performed [${action}] on ${targetName}`,
        type: 'success'
    });
    setIsShowMenu(false);
};

创意使用场景

工作流编辑器：节点上的上下文菜单提供编辑属性、删除、复制或添加连接等操作。画布菜单提供缩放适应或自动布局等全局操作。

项目管理工具：节点菜单允许任务状态更改、资源分配或依赖关系管理。画布菜单创建新任务或应用过滤器。

数据库架构设计器：右键单击表可进行列编辑、索引管理或关系创建。画布菜单添加新表或生成架构文档。

思维导图应用：节点菜单提供格式选项、图标选择或笔记附件。画布菜单创建新中心主题或导出地图。

网络拓扑设计器：设备菜单提供配置访问、状态监控或连接管理。画布菜单添加设备或运行网络模拟。

游戏关卡编辑器：实体菜单编辑属性、触发器或行为。画布菜单放置新实体、图层或测试运行关卡。

知识图谱编辑器：概念菜单编辑属性、添加相关概念或查看连接。画布菜单创建新概念或导入数据。