Context Menu

The context menu options configure right-click menus for nodes, edges, and the canvas.

By default:

• Context menus are enabled.
• Each menu (node, edge, canvas) have separate actions.
• Any additional custom actions are added after the default actions.

Disabling tooltips

Pretty straightforward by setting the enabled property to false.

const options = {
    UI: {
        contextMenu: {
            enabled: false
        }
    }
}

Additional actions

You can customize the actions that appear when right-clicking a node, an edge, or the canvas.

Each context menu is split into two sections:

• topbar for quick actions (compact icons). Accept a MenuQuickActionItemOptions.
• menu for full menu actions. Accepts a MenuActionItemOptions.

You can configure these menus for these scopes:

• menuNode
• menuEdge
• menuCanvas

Additional actions

const options = {
    UI: {
        contextMenu: {
            menuNode: {
                topbar: [
                    {
                        text: 'Delete Node',
                        variant: 'danger',
                        onclick: (evt, node) => console.log('Delete', node)
                    }
                ],
                menu: [
                    {
                        text: 'Edit Node',
                        variant: 'success',
                        onclick: (evt, node) => console.log('Edit', node)
                    }
                ]
            },
            menuEdge: {
                menu: [
                    {
                        text: 'Delete Edge',
                        variant: 'danger',
                        onclick: (evt, edge) =>
                            console.log('Delete edge', edge)
                    }
                ]
            },
            menuCanvas: {
                topbar: [
                    {
                        text: 'Add Node',
                        variant: 'primary',
                        onclick: (evt) => console.log('Add Node')
                    }
                ]
            }
        },
        tooltip: {
            enabled: false,
        },
    }
}

Options or action items

The interface for action items are defined here.

Option	Type	Default	Description
iconClass	IconClass	undefined	CSS class used as an icon. Typically used in icon libraries such as fontawesome. Example: fa-solid fa-edit
iconUnicode	IconUnicode	undefined	Unicode character used as an icon. Raw unicode to be used in icon libraries such as fontawesome. Example: ``\uf007`
imagePath	ImagePath	undefined	Path to an image used as an icon.
svgIcon	SVGIcon	undefined	Inline SVG object used as an icon. Example: <svg>...</svg>
text	string	required	The action’s label shown in menus and toolbars.
title	string	undefined	Optional text label displayed next to the item.
variant	UIVariant	outline-primary	Visual variant (style) of the menu item.
visible	boolean | (element: Node | Edge | null) => boolean	true	Controls whether the item is visible. Can be dynamic.
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	required	Triggered when the user activates the menu item.