Node Context Menu

Demonstrates a context menu implementation with dynamic actions based on target type (node, line, or canvas), using eventPositionOnView for accurate positioning.

Node Context Menu

Functional Overview

This example demonstrates implementing a context menu for nodes with different actions based on the target type (node, line, or canvas). The menu is rendered via RGSlotOnView and positioned using eventPositionOnView from the contextmenu event handler.

Implementation of Key Features

Context Menu Handler with View Position

const onContextmenu = (
    e: RGUserEvent,
    objectType: RGEventTargetType,
    object: RGNode | RGLine | undefined,
    eventPositionOnCanvas: RGCoordinate,
    eventPositionOnView: RGCoordinate
) => {
    setMenuTarget({ type: objectType, data: object });
    // Use eventPositionOnView directly for menu positioning
    setMenuPosition({ x: eventPositionOnView.x, y: eventPositionOnView.y });
    setIsShowMenu(true);
};

Dynamic Menu Actions Based on Target Type

<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>

            {/* Option 1: View Details */}
            <div className="menu-item" onClick={() => doMenuAction('View Details')}>
                <Info size={16} /> View Details
            </div>

            {/* Option 2: Type-specific actions */}
            {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>
            )}

            {/* Option 3: Common actions */}
            {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>

Action Handler

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);
};

Creative Use Cases

Workflow Editors: Context menus on nodes provide actions like edit properties, delete, duplicate, or add connections. Canvas menu offers global operations like zoom to fit or auto-layout.

Project Management Tools: Node menus allow task status changes, resource assignment, or dependency management. Canvas menu creates new tasks or applies filters.

Database Schema Designers: Right-click tables for column editing, index management, or relationship creation. Canvas menu adds new tables or generates schema documentation.

Mind Mapping Apps: Node menu offers formatting options, icon selection, or note attachments. Canvas menu creates new central topics or exports the map.

Network Topology Designers: Device menus provide configuration access, status monitoring, or connection management. Canvas menu adds devices or runs network simulations.

Game Level Editors: Entity menus edit properties, triggers, or behaviors. Canvas menu places new entities, layers, or test runs the level.

Knowledge Graph Editors: Concept menus edit attributes, add related concepts, or view connections. Canvas menu creates new concepts or imports data.