Menu contextuel

Les options du menu contextuel configurent les menus contextuels pour les nœuds, les bords et le canevas.

Par défaut :

• Context menus are enabled.
• Chaque menu (nœud, bord, canevas) possède des actions distinctes.
• Toutes les actions personnalisées supplémentaires sont ajoutées après les actions par défaut, au-dessus de la suppression.

Désactiver les info-bulles

Assez simple en définissant la propriété enabled sur false.

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

Actions supplémentaires

Vous pouvez personnaliser les actions qui apparaissent lorsque vous cliquez avec le bouton droit sur un nœud, un bord ou le canevas.

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
• menuNote
• menuSelection
• menuCanvas

Actions par défaut

Portée	Entrées par défaut
menuNode	Épingler / Détacher / Focus / Masquer (barre supérieure) · Pivoter · Retirer du groupe · Remettre dans le groupe · Afficher l'image · Sélectionner les voisins · Masquer les enfants · Se connecter à… · Inspecter les propriétés · Supprimer le nœud
menuEdge	Modifier le bord · Supprimer le bord
menuNote	Masquer la note (barre supérieure) · Supprimer la note
menuSelection	Épingler / Détacher / Masquer la sélection (barre supérieure) · Pivoter · Regrouper les nœuds sélectionnés · Retirer du groupe · Remettre dans le groupe · Dissocier · Sélectionner les voisins · Supprimer la sélection
menuCanvas	Épingler tout / Tout détacher (barre supérieure) · Ajouter un nœud ici · Ajouter une note · Libérer les nœuds épinglés (pendant qu'un nœud est épinglé)

Les menus de nœud, de sélection et de groupe se lisent dans le même ordre : Pivot ▸ d'abord, puis les entrées group qui s'appliquent, puis les autres entrées avec la vôtre après elles, et la suppression en dernier. Le menu d'un groupe (Pivot · Ouvrir le groupe · Sélectionner les membres · Afficher les membres dans le tableau · Renommer le groupe · Dissocier · Sélectionner les voisins · Supprimer les membres) appartient à la bibliothèque et ne prend aucune entrée de votre part. Une entrée qui ne s'applique pas est supprimée sans déplacer les autres.

Les entrées du chemin d'écriture (supprimer, modifier, créer) passent par leurs hooks avant — voir Hooks de cycle de vie du chemin d'écriture — et chacune disparaît lorsque son indicateur editors.<editor>.enabled est false : Supprimer avec deletion, Edit Edge avec edgeEditor, Ajouter un nœud ici avec nodeCreator, Connectez-vous à… avec edgeCreator. Il en va de même pour les entrées qui sont une porte vers une fonctionnalité commutable : Ajouter une note et l'ensemble menuNote suit UI.notes, Inspecter les propriétés suit UI.inspector. Vos propres entrées ne sont jamais fermées. Les deux entrées "…ici" placent leur élément là où le menu ** a été ouvert**, quel que soit le zoom ou le panoramique.

Agir sur une sélection

Un clic droit sur un nœud faisant partie d'une sélection de plusieurs nœuds ouvre menuSelection, indiquant le nombre de nœuds sur lesquels il agit. Chaque entrée agit sur l'ensemble de la sélection, comme le font les actions groupées de la barre latérale, et les entrées qui n'ont de sens que pour un seul nœud (Inspecter, Se connecter à…, Afficher l'image) sont laissées de côté. Un clic droit sur un nœud en dehors de la sélection ouvre le menu de ce nœud et laisse la sélection telle quelle, et le canevas conserve son propre menu. Les entrées de menuSelection reçoivent les nœuds sélectionnés sous forme de Node[], dans visible comme dans onclick.

Une ligne de la table de données ouvre le même menu que son élément sur le canevas.

Del masque les nœuds sélectionnés. Il masque plutôt que supprime car un masquage ne coûte rien à annuler ; Supprimer la sélection est dans le menu.

Actions supplémentaires

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 ou éléments d'action

L'interface pour les éléments d'action est définie ici.

Options	Type	Valeur par défaut	Description
iconClass	IconClass	undefined	Classe CSS utilisée comme icône. Généralement utilisé dans les bibliothèques d'icônes telles que fontawesome. Exemple : fa-solid fa-edit
iconUnicode	IconUnicode	undefined	Caractère Unicode utilisé comme icône. Unicode brut à utiliser dans les bibliothèques d'icônes telles que fontawesome. Exemple : \uf007
imagePath	ImagePath	undefined	Chemin d'accès à une image utilisée comme icône.
svgIcon	SVGIcon	undefined	Objet SVG en ligne utilisé comme icône. Exemple : <svg>...</svg>
text	string	obligatoire	Le libellé de l’action affiché dans les menus et les barres d’outils.
title	string	undefined	Étiquette de texte facultative affichée à côté de l’élément.
variant	UIVariant	outline-primary	Variante visuelle (style) de l'élément de menu.
visible	boolean | (element: Node | Node[] | Edge | null) => boolean	true	Contrôle si l'élément est visible. Peut être dynamique.
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	obligatoire	Déclenché lorsque l'utilisateur active l'élément de menu.