Menu de Contexto

As opções do menu de contexto configuram menus de clique com o botão direito para nós, arestas e tela.

Por padrão:

• Os menus de contexto estão ativados.
• Cada menu (nó, borda, tela) possui ações separadas.
• Quaisquer ações personalizadas adicionais são adicionadas após as ações padrão, acima da exclusão.

Desativando dicas de ferramentas

Bastante simples, definindo a propriedade enabled como false.

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

Ações adicionais

Você pode personalizar as ações que aparecem ao clicar com o botão direito em um nó, uma aresta ou na tela.

Cada menu de contexto é dividido em duas seções:

• topbar para ações rápidas (ícones compactos). Aceite um MenuQuickActionItemOptions.
• menu para ações completas do menu. Aceita um MenuActionItemOptions.

Você pode configurar estes menus para estes escopos:

• menuNode
• menuEdge
• menuNote
• menuSelection
• menuCanvas

Ações padrão

Escopo	Entradas padrão
menuNode	Fixar / Desafixar / Focar / Ocultar (barra superior) · Girar · Sair do grupo · Colocar de volta no grupo · Ver imagem · Selecionar vizinhos · Ocultar filhos · Conectar a… · Inspecionar propriedades · Excluir nó
menuEdge	Editar borda · Excluir borda
menuNote	Ocultar nota (barra superior) · Remover nota
menuSelection	Fixar / Desafixar / Ocultar selecionados (barra superior) · Dinamizar · Agrupar nós selecionados · Sair do grupo · Colocar de volta no grupo · Desagrupar · Selecionar vizinhos · Excluir selecionados
menuCanvas	Fixar tudo / Desafixar tudo (barra superior) · Adicionar nó aqui · Adicionar nota · Liberar nós fixados (enquanto qualquer nó estiver fixado)

Os menus de nó, seleção e grupo são lidos na mesma ordem: Pivot ▸ primeiro, depois as entradas group que se aplicam, depois as outras entradas com as suas depois delas e a exclusão por último. O menu de um grupo (Pivot · Abrir grupo · Selecionar membros · Ver membros na tabela · Renomear grupo · Desagrupar · Selecionar vizinhos · Excluir membros) é da própria biblioteca e não aceita entradas suas. Uma entrada que não se aplica é deixada de fora sem mover as outras.

As entradas do caminho de gravação (excluir, editar, criar) passam por seus ganchos anteriores - consulte Ganchos do ciclo de vida do caminho de gravação - e cada um desaparece quando seu sinalizador editors.<editor>.enabled é false: Delete com deletion, Edit Edge com edgeEditor, Adicione nó aqui com nodeCreator, Conecte-se a… com edgeCreator. O mesmo vale para entradas que são uma porta para um recurso comutável: Adicionar Nota e todo o menuNote segue UI.notes, Inspecionar Propriedades segue UI.inspector. Suas próprias entradas nunca são bloqueadas. Ambas as entradas "… aqui" colocam seu elemento onde o menu ** foi aberto**, seja qual for o zoom ou panorâmica.

Atuando em uma seleção

Clicar com o botão direito em um nó que faz parte de uma seleção de vários nós abre menuSelection, com indicação de quantos nós ele atua. Cada entrada atua em toda a seleção, como fazem as ações em massa da barra lateral, e as entradas que só fazem sentido para um nó (Inspecionar, Conectar a…, Exibir imagem) são deixadas de fora. Clicar com o botão direito em um nó fora da seleção abre o menu desse nó e deixa a seleção como está, e a tela mantém seu próprio menu. As entradas de menuSelection recebem os nós selecionados como Node[], em visible como em onclick.

Uma linha da data table abre o mesmo menu que seu elemento na tela.

Del oculta os nós selecionados. Ele oculta em vez de excluir porque ocultar não custa nada para ser desfeito; Excluir selecionados está no menu.

Ações adicionais

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

Opções ou itens de ação

A interface para itens de ação é definida aqui.

Opção	Tipo	Padrão	Descrição
iconClass	IconClass	undefined	CSS classe usada como ícone. Normalmente usado em bibliotecas de ícones como fontawesome. Exemplo: fa-solid fa-edit
iconUnicode	IconUnicode	undefined	Caractere Unicode usado como ícone. Unicode bruto para ser usado em bibliotecas de ícones como fontawesome. Exemplo: \uf007
imagePath	ImagePath	undefined	Caminho para uma imagem usada como ícone.
svgIcon	SVGIcon	undefined	Objeto SVG embutido usado como ícone. Exemplo: <svg>...</svg>
text	string	obrigatório	O rótulo da ação mostrado nos menus e nas barras de ferramentas.
title	string	undefined	Etiqueta de texto opcional exibida ao lado do item.
variant	UIVariant	outline-primary	Variante visual (estilo) do item de menu.
visible	boolean | (element: Node | Node[] | Edge | null) => boolean	true	Controla se o item está visível. Pode ser dinâmico.
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	obrigatório	Disparado quando o usuário ativa o item de menu.