3.1 KiB
TL;DR: Menu.tsx est le composant qui affiche et qui traite l'event contextmenu sur la page InitActions de Editor.tsx prépare le modèle pour Menu.tsx ContextMenuActions définient les actions de l'API
Context Menu
Ce document présente comment le menu contextuel est implémenté.
Event listener
Pour implémenter le menu contextuel, il faut en premier ajouter un event listener sur contextmenu.
Cela se fait dans le composant Menu.tsx via la fonction UseMouseEvents().
Elle équipe plusieurs events sur la page en plus de contextmenu afin de fermer correctement lorsque l'on clique ailleurs.
Il n'existe donc qu'un seul menu contextuel pour toute la page.
Affichage du contenu
On a vu que Menu.tsx s'occupe de traiter l'event contextmenu. Regardons maintenant comment elle affiche le menu.
Ce composant utilise une hashmap actions: Map<string, IMenuAction[]> pour lire les différentes actions possible, la clé servant d'identifiant et de pattern.
En effet, la fonction AddClassSpecificActions, obtenant le composant html lit les classes et vérifie s'il est présent dans le dictionnaire avec props.actions.get(className).
S'il est présent, alors on itère sur les différentes actions possible pour cette classe pour ajouter des MenuItem représentant une ligne du menu contextuel. Chaque MenuItem possède un fonction qui sera exécutée lorsque la ligne est cliquée. Il possède également un texte, un titre qui sera affiché si le curseur survole la ligne, et, optionnellement, un raccourci qui sera affiché à droite de la ligne.
En plus des actions de classes, il y a aussi des actions universelles comme le undo ou redo qui sont affichées n'importe où on clique. Celle-ci ont pour id '', une chaine de caractères vide. On itère sur cette liste d'action pour ajouter les lignes.
L'ordre d'affichage est donc défini :
- actions de classes
- actions universelles
L'ordre des classes est l'ordre d'ajout dans le dictionnaire.
Création du dictionnaire
Parlons de l'initialisation du dictionnaire.
Le composant Menu est utilisé dans Editor. C'est aussi ici que l'ont crée le dictionnaire.
La fonction InitActions s'occupe d'enrichîr le dictionnaire des différentes actions.
On peut voir qu'au début de la fonction que les actions universelles y sont initialisées. Ensuite, les actions spécifiques aux classes y sont ajoutés avec au début les actions définies dans SVGLayoutDesigner et après, les actions définies dans la configuration de l'API (donc Diviser remplissage par exemple).
Chaque action provenant de l'API utilise la fonction GetAction du fichier utilitaire ContextMenuActions.ts.
Cette fonction équipe l'action qui sera exécutée d'une autre fonction appelé SetContainerList. Cette autre fonction s'occupe de faire un appel REST vers l'api sur le point d'accès Configuration.APIConfiguration.apiSetContainerListUrl ou, si elle n'est pas définie, sur VITE_API_SET_CONTAINER_LIST_URL.
Cela veut dire que pour l'instant toutes les actions provenant de l'API a pour but de remplacer, d'ajouter ou de supprimer des conteneurs.