> 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` 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 : 1) actions de classes 2) 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.