Menú contextual

Las opciones del menú contextual configuran menús contextuales para nodos, bordes y el lienzo.

Por defecto:

• Los menús contextuales están habilitados.
• Cada menú (nodo, borde, lienzo) tiene acciones independientes.
• Cualquier acción personalizada adicional se agrega después de las acciones predeterminadas, encima de la eliminación.

Deshabilitar información sobre herramientas

Bastante sencillo estableciendo la propiedad enabled en false.

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

Acciones adicionales

Puede personalizar las acciones que aparecen al hacer clic derecho en un nodo, un borde o el lienzo.

Cada menú contextual se divide en dos secciones:

• topbar para acciones rápidas (iconos compactos). Acepta un MenuQuickActionItemOptions.
• menu para acciones del menú completo. Acepta un MenuActionItemOptions.

Puede configurar estos menús para estos ámbitos:

• menuNode
• menuEdge
• menuNote
• menuSelection
• menuCanvas

Acciones predeterminadas

Alcance	Entradas predeterminadas
menuNode	Fijar / Desanclar / Enfocar / Ocultar (barra superior) · Pivotar · Salir del grupo · Volver a colocar en el grupo · Ver imagen · Seleccionar vecinos · Ocultar niños · Conectar a… · Inspeccionar propiedades · Eliminar nodo
menuEdge	Editar borde · Eliminar borde
menuNote	Ocultar nota (barra superior) · Eliminar nota
menuSelection	Fijar / Desanclar / Ocultar seleccionados (barra superior) · Pivotar · Agrupar nodos seleccionados · Sacar del grupo · Volver a colocar en el grupo · Desagrupar · Seleccionar vecinos · Eliminar seleccionados
menuCanvas	Fijar todo / Desanclar todo (barra superior) · Agregar nodo aquí · Agregar nota · Liberar nodos fijados (mientras cualquier nodo esté fijado)

Los menús de nodo, selección y grupo se leen en el mismo orden: Pivote ▸ primero, luego el grupo entradas que aplican, luego las otras entradas con el tuyo después de ellos, y el de eliminación al final. El menú de un grupo (Pivotar · Abrir grupo · Seleccionar miembros · Ver miembros en la tabla · Cambiar nombre del grupo · Desagrupar · Seleccionar vecinos · Eliminar miembros) es el propia de la biblioteca y no acepta entradas suyas. Una entrada que no aplica se omite sin moviendo a los demás.

Las entradas de la ruta de escritura (eliminar, editar, crear) pasan por sus ganchos anteriores; consulte Enganches del ciclo de vida de la ruta de escritura, y cada uno desaparece cuando su bandera editors.<editor>.enabled es false: Eliminar con deletion, Editar borde con edgeEditor, Agregar nodo aquí con nodeCreator, Conectar a… con edgeCreator. Lo mismo ocurre con las entradas que son una puerta a una función conmutable: Agregar nota y el menuNote completo sigue UI.notes, Inspeccionar propiedades sigue a UI.inspector. Sus propias entradas nunca están cerradas. Ambas entradas "...aquí" colocan su elemento donde se abrió el menú, cualquiera que sea el ampliar o desplazar.

Actuando sobre una selección

Al hacer clic con el botón derecho en un nodo que forma parte de una selección de varios nodos, se abre menuSelection, dirigido con cuántos nodos actúa. Cada entrada actúa sobre toda la selección, como Las acciones masivas de la barra lateral sí lo hacen, y las entradas que solo tienen sentido para un nodo (Inspeccionar, Conectarse a…, Ver imagen) se omiten. Al hacer clic con el botón derecho en un nodo fuera de la selección, se abre propio menú de ese nodo y deja la selección como está, y el lienzo mantiene su propio menú. Las entradas de menuSelection reciben los nodos seleccionados como Node[], en visible como en onclick.

Una fila de la tabla de datos abre el mismo menú que su elemento en la lienzo.

Del oculta los nodos seleccionados. Oculta en lugar de eliminar porque ocultar cuesta nada que deshacer; Eliminar seleccionados está en el menú.

Acciones adicionales

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

Opciones o elementos de acción

La interfaz para los elementos de acción se define aquí.

Opción	Tipo	Predeterminado	Descripción
iconClass	IconClass	undefined	CSS clase utilizada como icono. Normalmente se utiliza en bibliotecas de iconos como fontawesome. Ejemplo: fa-solid fa-edit
iconUnicode	IconUnicode	undefined	Carácter Unicode utilizado como icono. Unicode sin formato para ser utilizado en bibliotecas de iconos como fontawesome. Ejemplo: \uf007
imagePath	ImagePath	undefined	Ruta a una imagen utilizada como icono.
svgIcon	SVGIcon	undefined	Objeto SVG en línea utilizado como icono. Ejemplo: <svg>...</svg>
text	string	requerido	La etiqueta de la acción que se muestra en menús y barras de herramientas.
title	string	undefined	Etiqueta de texto opcional que se muestra junto al artículo.
variant	UIVariant	outline-primary	Variante visual (estilo) del elemento del menú.
visible	boolean | (element: Node | Node[] | Edge | null) => boolean	true	Controla si el elemento es visible. Puede ser dinámico.
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	requerido	Se activa cuando el usuario activa el elemento del menú.