From f1a9d912b8d24eb2b7ecbc385b1de689581b2b26 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Mon, 17 Oct 2022 12:56:31 +0200 Subject: [PATCH] Added ContextMenu documentation + added some tl;dr --- docs/#Project/Pages/Behaviors.md | 20 +++++++--- docs/#Project/Pages/CICD.md | 2 +- docs/#Project/Pages/ContextMenu.md | 55 +++++++++++++++++++++++++++ docs/#Project/Pages/DataStructure.md | 5 ++- docs/#Project/Pages/SmartComponent.md | 4 +- 5 files changed, 78 insertions(+), 8 deletions(-) create mode 100644 docs/#Project/Pages/ContextMenu.md diff --git a/docs/#Project/Pages/Behaviors.md b/docs/#Project/Pages/Behaviors.md index cf55439..47ce155 100644 --- a/docs/#Project/Pages/Behaviors.md +++ b/docs/#Project/Pages/Behaviors.md @@ -1,3 +1,16 @@ +> TL;DR +> Behaviors.ts définis les comportements qui sont utilisés. + +> Actuellement sont activés par défaut : +> - Corps rigide (simple) : Est restraint dans le parent +> - Ancrage : Impose la priorité de position et de taille +> - Flex : se redimensionne automatiquement + +> Désactivés: +> - Corps rigide (complet) : Est restraint par les parents et par ses voisins (fonctionne mais pas intuitif) +> - Poussé : quand un conteneur est ajouté au bout de la bande filante, pousse tous les conteneurs à sa gauche (fonctionne mais pas intuitif) +> - Swap : échange de place avec un autre conteneur lorsqu'ils sont superposés (buggué ne pas utiliser) + # Comportements des conteneurs Ce document traite des comportements spéciaux et uniques qu'un conteneur peut avoir. @@ -21,8 +34,6 @@ Cependant, il a une règle commune pour tout comportement qui s'applique à ses Il s'agit d'appliquer les comportements spéciaux de ses enfants (rigide ou ancré). -Traduit avec www.DeepL.com/Translator (version gratuite) - ## Applications @@ -37,11 +48,10 @@ An example would be trying to overlap an element in order to use it as a layer. ## Références de code et algorithmes -Dans le module `PropertiesOperations.ts` dans les fonctions suivantes : +Dans le module `ContainerOperations.ts` dans les fonctions suivantes : - `OnPropertyChange()` -- `OnPropertiesSubmit()` -et dans le module `ContainerOperation.ts` dans `AddContainer()`, +et dans le module `AddContainer.ts` dans `AddContainer()`, il utilise la fonction `ApplyBehaviors` du module `Behaviors.ts` pour appliquer les comportements spéciaux de ses enfants. diff --git a/docs/#Project/Pages/CICD.md b/docs/#Project/Pages/CICD.md index 4aee2bf..55b74db 100644 --- a/docs/#Project/Pages/CICD.md +++ b/docs/#Project/Pages/CICD.md @@ -5,7 +5,7 @@ This project uses Azure Pipelines to runs automatic tests. Its `azure-pipelines.yml` configuration file can be found at the root project folder. -# Drone.io +# Drone.io (deprecated) Due to the limitations of Azure Pipelines (limited free usage, no parallel, no dockerhub...), it might be more useful to use Drone.io. However `pnpm` will not be as useful as in Azure Pipelines since we cannot cache on the parent machine. diff --git a/docs/#Project/Pages/ContextMenu.md b/docs/#Project/Pages/ContextMenu.md new file mode 100644 index 0000000..2e5420b --- /dev/null +++ b/docs/#Project/Pages/ContextMenu.md @@ -0,0 +1,55 @@ +> 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. \ No newline at end of file diff --git a/docs/#Project/Pages/DataStructure.md b/docs/#Project/Pages/DataStructure.md index b04f245..1c57864 100644 --- a/docs/#Project/Pages/DataStructure.md +++ b/docs/#Project/Pages/DataStructure.md @@ -1,3 +1,6 @@ + +> TL;DR: Ce projet utilise un dictionnaire pour représenter un arbre/graphe + # Préface Ce document explique la structure de données utilisée pour les conteneurs. @@ -40,7 +43,7 @@ B: Node = { Donc le graphe est simplement `A <-> B` -Ceci est un graphe cyclique que nous ne verrons pas souvent dans ce projet. +Ceci est un graphe cyclique que nous ne verrons pas souvent dans ce projet. En effet, nous avons plutôt quelque chose comme ça: ``` diff --git a/docs/#Project/Pages/SmartComponent.md b/docs/#Project/Pages/SmartComponent.md index e632da8..38460b6 100644 --- a/docs/#Project/Pages/SmartComponent.md +++ b/docs/#Project/Pages/SmartComponent.md @@ -1,3 +1,5 @@ +Source: https://dev.azure.com/techformsa/SmartConfigurator/_wiki?pageId=122&friendlyName=Int%C3%A9grer-le-projet-en-tant-que-composant-dans-Modeler# + - [Préface](#préface) - [Customiser et build le projet (recommandé)](#customiser-et-build-le-projet-(recommandé)) * [Configurer les options de build](#configurer-les-options-de-build) @@ -92,7 +94,7 @@ Cliquez sur le menu hamburger et cliquez sur **Download Artifacts** :
- + ```