Node Menu with Manual Positioning

Demonstrates node context menu implementation using manual event handling and position calculation relative to the graph container.

Node Menu with Manual Positioning

Functional Overview

This example demonstrates an alternative approach to implementing node context menus using manual event handling and position calculation. The menu appears on both click and right-click (contextmenu) events, positioned relative to the graph container.

Implementation of Key Features

Manual Menu Positioning

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

Event Handlers in Node Slot

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

Menu Rendering with Pointer Events

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

Creative Use Cases

Interactive Dashboards: Nodes represent dashboard widgets. Clicking opens a menu with widget-specific actions like configure, refresh, export data, or remove.

Organization Charts: Employee nodes show menus for actions like view profile, direct report, send message, or view performance metrics.

Network Topology Maps: Device nodes offer menus for configuration, monitoring, diagnostics, or connection management.

Process Flow Diagrams: Task nodes provide menus for status updates, assignment, adding dependencies, or viewing history.

Mind Mapping: Concept nodes show formatting options, icon selection, color changes, or attachment management.

Social Network Analysis: User nodes display actions like view connections, analyze influence, send message, or view profile details.

Inventory Management: Product nodes offer menu options for stock adjustment, supplier info, pricing update, or sales history.