Context-menu entries

Add your own right-click actions to nodes, edges, or the canvas. Each menu takes a topbar (quick icon buttons) and a menu (a labelled list); every item gets an onclick receiving the element it was opened on. variant themes the item and visible can be a predicate.

Right-click a node, an edge, or the background and pick an action — each pops a notification. Your entries appear alongside Pivotick's built-in ones.

Options

// `graph` is your Pivotick instance. A menu item's onclick receives the Node/Edge
// it was opened on; here each action pops a notification. Any SVG string works as
// an icon.
const infoIcon = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 11v4M12 7.5h.01"/></svg>'

const options = {
    UI: {
        contextMenu: {
            // Right-click a node:
            menuNode: {
                topbar: [
                    {
                        text: 'Details',
                        svgIcon: infoIcon,
                        variant: 'outline-primary',
                        onclick: (e, node) =>
                            graph.notifier.info(node.getData().label, `${node.getData().role} · ${node.getData().commits} commits`)
                    }
                ],
                menu: [
                    {
                        text: 'Copy ID',
                        variant: 'outline-secondary',
                        onclick: (e, node) => graph.notifier.success('Copied id', node.id)
                    },
                    {
                        text: 'Flag for review',
                        variant: 'danger',
                        // `visible` can be a predicate — only show for contributors:
                        visible: (node) => node.getData().role === 'Contributor',
                        onclick: (e, node) => graph.notifier.warning('Flagged', node.getData().label)
                    }
                ]
            },
            // Right-click an edge:
            menuEdge: {
                menu: [
                    {
                        text: 'Inspect edge',
                        variant: 'outline-primary',
                        onclick: (e, edge) => graph.notifier.info('Edge', edge.id)
                    }
                ]
            },
            // Right-click the background:
            menuCanvas: {
                topbar: [
                    {
                        text: 'New node here',
                        variant: 'outline-primary',
                        onclick: () => graph.notifier.info('Canvas action', 'You right-clicked the background')
                    }
                ]
            }
        }
    }
}

Data

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice', role: 'Maintainer', team: 'Core', commits: 342 } },
        { id: 'bob', data: { label: 'Bob', role: 'Contributor', team: 'Core', commits: 87 } },
        { id: 'carol', data: { label: 'Carol', role: 'Reviewer', team: 'Docs', commits: 45 } },
        { id: 'dave', data: { label: 'Dave', role: 'Contributor', team: 'Docs', commits: 63 } },
        { id: 'erin', data: { label: 'Erin', role: 'Maintainer', team: 'Infra', commits: 210 } }
    ],
    edges: [
        { from: 'alice', to: 'bob', data: { label: 'mentors' } },
        { from: 'alice', to: 'carol', data: { label: 'reviews' } },
        { from: 'carol', to: 'dave', data: { label: 'pairs' } },
        { from: 'erin', to: 'alice', data: { label: 'syncs' } }
    ]
}