+
+# Table des matières
+
+[1 Auteur [4](#auteur)](#auteur)
+
+[2 Suivi des modifications
+[4](#suivi-des-modifications)](#suivi-des-modifications)
+
+[3 Ouvrir l’outil Pyramid
+[5](#ouvrir-loutil-pyramid)](#ouvrir-loutil-pyramid)
+
+[4 Prise en main de Pyramid
+[6](#prise-en-main-de-pyramid)](#prise-en-main-de-pyramid)
+
+[4.1 Raccourcis claviers
+[6](#raccourcis-claviers)](#raccourcis-claviers)
+
+[4.1.1 Interne à Pyramid [6](#interne-à-pyramid)](#interne-à-pyramid)
+
+[4.1.2 Externe à Pyramid [7](#externe-à-pyramid)](#externe-à-pyramid)
+
+[4.2 Description des interfaces
+[7](#description-des-interfaces)](#description-des-interfaces)
+
+[4.2.1 Barre d’outils de paramétrage
+[8](#barre-doutils-de-paramétrage)](#barre-doutils-de-paramétrage)
+
+[4.2.1.1 Bouton cacher la fenêtre de navigation
+[8](#bouton-cacher-la-fenêtre-de-navigation)](#bouton-cacher-la-fenêtre-de-navigation)
+
+[4.2.1.2 Bouton sauvegarder
+[8](#bouton-sauvegarder)](#bouton-sauvegarder)
+
+[4.2.1.3 Bouton configuration de projet
+[9](#bouton-configuration-de-projet)](#bouton-configuration-de-projet)
+
+[4.2.1.4 Bouton de paramètre utilisateur
+[11](#bouton-de-paramètre-utilisateur)](#bouton-de-paramètre-utilisateur)
+
+[4.2.1.5 Bouton rafraîchissement
+[12](#bouton-rafraîchissement)](#bouton-rafraîchissement)
+
+[4.2.2 Boutons annuler / refaire (Undo/Redo)
+[12](#boutons-annuler-refaire-undoredo)](#boutons-annuler-refaire-undoredo)
+
+[4.2.3 Barre d’outils de l’espace de travail
+[13](#barre-doutils-de-lespace-de-travail)](#barre-doutils-de-lespace-de-travail)
+
+[4.2.3.1 Bouton test [13](#bouton-test)](#bouton-test)
+
+[4.2.3.2 Bouton propriétés de l’espace de travail
+[13](#bouton-propriétés-de-lespace-de-travail)](#bouton-propriétés-de-lespace-de-travail)
+
+[4.2.3.3 Bouton cacher la fenêtre de propriétés
+[15](#bouton-cacher-la-fenêtre-de-propriétés)](#bouton-cacher-la-fenêtre-de-propriétés)
+
+[4.2.4 Fenêtre de navigation
+[16](#fenêtre-de-navigation)](#fenêtre-de-navigation)
+
+[4.2.4.1 Bouton ajouter une nouvelle racine
+[16](#bouton-ajouter-une-nouvelle-racine)](#bouton-ajouter-une-nouvelle-racine)
+
+[4.2.4.1.1 Colonne des catégories
+[17](#colonne-des-catégories)](#colonne-des-catégories)
+
+[4.2.4.1.2 Colonne de visualisation du contenu de la catégorie
+[18](#colonne-de-visualisation-du-contenu-de-la-catégorie)](#colonne-de-visualisation-du-contenu-de-la-catégorie)
+
+[4.2.4.1.3 Colonne de prévisualisation
+[18](#colonne-de-prévisualisation)](#colonne-de-prévisualisation)
+
+[4.2.4.2 Bouton cochable cacher/montrer les fils
+[19](#bouton-cochable-cachermontrer-les-fils)](#bouton-cochable-cachermontrer-les-fils)
+
+[4.2.4.3 Liste des fils dans l’espace de travail
+[21](#liste-des-fils-dans-lespace-de-travail)](#liste-des-fils-dans-lespace-de-travail)
+
+[4.2.5 Menu contextuel clic droit
+[21](#menu-contextuel-clic-droit)](#menu-contextuel-clic-droit)
+
+[4.2.5.1 Rechercher l’élément sélectionné
+[22](#rechercher-lélément-sélectionné)](#rechercher-lélément-sélectionné)
+
+[4.2.5.2 Inspection de l’élément sélectionné
+[23](#inspection-de-lélément-sélectionné)](#inspection-de-lélément-sélectionné)
+
+[4.2.5.3 Ajout d’enfant et suppression d’élément
+[24](#ajout-denfant-et-suppression-délément)](#ajout-denfant-et-suppression-délément)
+
+[4.2.5.4 Modifier l’index d’un enfant dans son parent
+[25](#modifier-lindex-dun-enfant-dans-son-parent)](#modifier-lindex-dun-enfant-dans-son-parent)
+
+[4.2.5.5 Grouper la sélection d’éléments
+[26](#grouper-la-sélection-déléments)](#grouper-la-sélection-déléments)
+
+[4.2.5.6 Niveau sur le calque
+[26](#niveau-sur-le-calque)](#niveau-sur-le-calque)
+
+[4.2.5.7 Copier/Coller [27](#copiercoller)](#copiercoller)
+
+[4.2.6 Fenêtre des propriétés
+[27](#fenêtre-des-propriétés)](#fenêtre-des-propriétés)
+
+[4.2.6.1 Onglet propriétés (Props)
+[27](#onglet-propriétés-props)](#onglet-propriétés-props)
+
+[4.2.6.2 Onglet visuels (Visuals)
+[29](#onglet-visuels-visuals)](#onglet-visuels-visuals)
+
+[4.2.6.3 Onglet de disposition (layout)
+[30](#onglet-de-disposition-layout)](#onglet-de-disposition-layout)
+
+[4.2.6.3.1 Disposition basique
+[30](#disposition-basique)](#disposition-basique)
+
+[4.2.6.3.2 Disposition linéaire
+[31](#disposition-linéaire)](#disposition-linéaire)
+
+[4.2.6.3.3 Disposition écoulement (Flow)
+[32](#disposition-écoulement-flow)](#disposition-écoulement-flow)
+
+[4.2.6.3.4 Disposition en cadre (Frame)
+[33](#disposition-en-cadre-frame)](#disposition-en-cadre-frame)
+
+[4.2.6.4 Onglet géométrie (Geo)
+[33](#onglet-géométrie-geo)](#onglet-géométrie-geo)
+
+[4.2.6.5 Onglet gestion de thème (Toplo-Theme)
+[34](#onglet-gestion-de-thème-toplo-theme)](#onglet-gestion-de-thème-toplo-theme)
+
+[4.2.6.5.1 Ajout de thème pour toplo theme manager
+[36](#ajout-de-thème-pour-toplo-theme-manager)](#ajout-de-thème-pour-toplo-theme-manager)
+
+[4.2.6.6 Onglet Playground [37](#onglet-playground)](#onglet-playground)
+
+[4.2.7 Espace de travail [40](#espace-de-travail)](#espace-de-travail)
+
+[4.3 Fonctionnalités [41](#fonctionnalités)](#fonctionnalités)
+
+[4.3.1 Modification d’arborescence cliqué glissé / déposé
+[41](#modification-darborescence-cliqué-glissé-déposé)](#modification-darborescence-cliqué-glissé-déposé)
+
+[4.3.2 Redimensionnement dynamique d’élément sélectionné
+[43](#redimensionnement-dynamique-délément-sélectionné)](#redimensionnement-dynamique-délément-sélectionné)
+
+# ****
+
+# Auteur
+
+| | **Nom** | **Date** |
+|-------------|-----------------|:--------:|
+| Rédigé par | Sully MILLET | 20/08/25 |
+| Vérifié par | Brendan LANDAIS | 27/08/25 |
+
+# Suivi des modifications
+
+| **Révision** | **Date** | **Description des évolutions** |
+|:------------:|:--------:|--------------------------------|
+| 00 | 20/08/25 | Version initiale |
+| | | |
+
+#
+
+# Ouvrir l’outil Pyramid
+
+Pour ouvrir Pyramid, dans un éditeur Pharo, aller dans Library -\>
+Pyramid -\> New project, comme sur la capture d’écran :
+
+
+
+Cela va directement ouvrir l’outil Pyramid dans une fenêtre de Pharo.
+
+# Prise en main de Pyramid
+
+## Raccourcis claviers
+
+### Interne à Pyramid
+
+| **Raccourcis** | **Combinaison de touche** | **Description** |
+|:--:|:--:|----|
+| Undo | CTRL + Z | Reviens en arrière sur l’action précédente s’il y en a. |
+| Redo | CTRL + Y | Reviens en avant sur l’action où on est revenu précédemment. |
+| Copier | 1 élément sélectionné + CTRL + C | Permet de copier l’élément qui est actuellement sélectionné. |
+| Coller | CTRL + V | Permet de coller un élément qui a été précédemment copié sur l’espace de travail. |
+| Coller dans un élément | 1 élément sélectionné + CTRL + V | Permet de coller dans un élément sélectionné et l’ajouter en tant que fils. |
+| Couper | 1 élément sélectionné + CTRL + X | Permet de couper l’élément sélectionné. |
+| Sauvegarder | CTRL + S | Permet de sauvegarder un projet ouvert et configuré. |
+| Tout sélectionner | CTRL + A | Permet de sélectionner tous les éléments de l’espace de travail. |
+| Sélectionner tous les fils | 1 élément sélectionné + CTRL + A | Permet de pouvoir sélectionner tous les fils de l’élément sélectionné. |
+| Grille | CTRL + G | Permet d’activer / désactiver la grille sur l’espace de travail |
+| Supprimer la sélection | 1 élément ou plus sélectionné + CTRL + D | Permet de supprimer le ou les éléments sélectionnés. |
+| Inspecter l’élément | 1 élément sélectionné + CTRL + I | Permet d’inspecter l’élément sélectionné. |
+| Déplacer un fils vers le haut | 1 élément sélectionné + CTRL + Flèche haut | Permet de déplacer vers le haut un fils dans l’arborescence de son parent. |
+| Déplacer un fils vers le bas | 1 élément sélectionné + CTRL + Flèche bas | Permet de déplacer vers le bas un fils dans l’arborescence de son parent. |
+| Déplacer la vue | CTLR + Cliqué déplacé | Permet le déplacement de la vue sur l’espace de travail. |
+| Position par défaut de la vue | CTRL + N | Permet de remettre la position de la vue sur l’espace de travail par défaut (emplacement) |
+| Zoomer sur l’espace de travail | CTRL + Mollette Haut | Permet de zoomer sur l’espace de travail. |
+| Dé zoomer sur l’espace de travail | CTRL + Mollette Bas | Permet de dé zoomer sur l’espace de travail. |
+
+Tous les raccourcis ci-dessous ne fonctionnent qu’avec le focus sur
+l’espace (espace de travail) dans Pyramid.
+
+| **Raccourcis** | **Combinaison de touche** | **Description** |
+|:--:|:--:|----|
+| Déplacer un élément vers le bas | 1 élément sélectionné + Flèche Bas | Permet de déplacer un élément sélectionné vers le bas. |
+| Déplacer un élément vers la droite | 1 élément sélectionné + Flèche Droite | Permet de déplacer un élément sélectionné vers la droite. |
+| Déplacer un élément vers la gauche | 1 élément sélectionné + Flèche Gauche | Permet de déplacer un élément sélectionné vers la gauche. |
+| Déplacer un élément à la position de la souris | 1 élément sélectionné + CTRL + Barre Espace | Permet de déplacer un élément sélectionné à la position de la souris. |
+
+### Externe à Pyramid
+
+| **Raccourcis** | **Combinaison de touche** | **Description** |
+|:--:|:--:|----|
+| Ouvrir un space dans Pyramid | F12 + focus sur un space d’une fenêtre Bloc/Toplo | Permet d’ouvrir directement dans Pyramid une application qui tourne dans une autre fenêtre en cours d’exécution en Pharo Bloc/Toplo. |
+
+## Description des interfaces
+
+Tout d’abord, vous pouvez voir ci-dessous l’aperçu global de l’interface
+lorsque vous ouvrez l’outil Pyramid.
+
+
+
+### Barre d’outils de paramétrage
+
+
+
+#### Bouton cacher la fenêtre de navigation
+
+Permet de cacher la fenêtre de navigation :
+
+
+
+
+C’est un bouton bascule (toggle) vous pouvez donc cacher la fenêtre en
+cliquant dessus, mais aussi la rendre visible lorsque vous cliquez une
+deuxième fois dessus.
+
+#### Bouton sauvegarder
+
+
+
+Ce bouton sert à sauvegarder les modifications effectuées et génère le
+code source correspondant.
+
+Si la configuration du projet n’a pas été faite, une erreur est
+affichée :
+
+
+
+Pour y remédier, il faut au préalable définir la configuration du projet
+(cf. bouton suivant).
+
+#### Bouton configuration de projet
+
+Pour configurer la sauvegarde du projet :
+
+
+
+Le bouton ouvre une fenêtre qui permet de configurer l’emplacement de
+sauvegarde du projet :
+
+
+
+Pour configurer la sauvegarde du projet dans l’onglet du bouton
+« project configuration » il faut remplir les trois champs suivants :
+
+- Le nom du package
+
+- Le nom de la classe
+
+- Le nom de la méthode
+
+Choisir s’il faut enregistrer en côté classe ou côté instance.
+
+#### Bouton de paramètre utilisateur
+
+
+
+Permet d’ouvrir l’interface de paramètres utilisateur de Pyramid avec
+les deux paramètres suivants :
+
+- Activer/Désactiver le raccourci F12 qui permet d’ouvrir dans Pyramid
+ une fenêtre Bloc/Toplo
+
+- Choisir le format de sérialisation soit en code source, soit en STON
+
+Fenêtre de paramètre ci-dessous :
+
+
+
+#### Bouton rafraîchissement
+
+Permet de rafraîchir l’espace de travail (zone centrale) :
+
+
+
+Ce bouton permet de résoudre les problèmes tels que la prévisualisation
+du projet dans la zone centrale qui ne s’affiche plus, cela permet donc
+de rafraîchir et de résoudre ce souci.
+
+Exemple :
+
+
+
+### Boutons annuler / refaire (Undo/Redo)
+
+###
+
+Ces boutons sont situés au centre de la barre d’outils, au-dessus de la
+zone de travail.
+
+
+
+Le bouton avec une flèche vers la gauche (Undo) sert à revenir en
+arrière sur une action passée et la flèche allant vers la droite (Redo)
+permet de rejouer l’action précédemment annulée.
+
+### Barre d’outils de l’espace de travail
+
+
+
+#### Bouton test
+
+
+
+Il permet de mettre en exécution l’espace de travail et donc, d’utiliser
+les boutons comme par exemple afficher un message dans Pharo avec une
+notification lorsqu’on clique dessus.
+
+Lorsqu’on est en mode de test, l’icône du bouton est modifiée et on peut
+sortir du mode test en recliquant dessus :
+
+
+
+#### Bouton propriétés de l’espace de travail
+
+
+
+Il permet de modifier la taille de l’espace de travail affiché dans la
+partie de prévisualisation de l’IHM en ouvrant la fenêtre suivante :
+
+
+
+Mais aussi de pouvoir afficher ou cacher une grille grâce à son
+paramètre de visibilité :
+
+
+
+On peut également modifier l’espacement entre deux lignes grâce à la
+valeur du champ « Spacing » qui est modifiable.
+
+
+
+La couleur est aussi paramétrable soit par valeur hexadécimal et son
+alpha (transparence).
+
+
+
+Ou grâce à une interface utilisateur disponible grâce au bouton
+suivant :
+
+
+
+L’interface du choix de couleur :
+
+
+
+La première ligne correspond également au choix de couleur via une
+valeur hexadécimale et d’un alpha (transparence).
+
+Le choix des couleurs se fait via les interfaces.
+
+Lorsque vous rentrez une valeur dans un champ textuel, veuillez bien
+appuyer sur la touche « Entrée » pour valider les changements
+(« Entrée » sur le clavier, pas le « Entrée » qui se situe sur le pavé
+numérique).
+
+#### Bouton cacher la fenêtre de propriétés
+
+
+
+Ce bouton permet, comme pour le bouton cacher la fenêtre de navigation,
+de pouvoir cacher la fenêtre de propriété à droite.
+
+### Fenêtre de navigation
+
+
+
+Cette fenêtre contient l’arborescence des éléments graphiques édités
+dans le projet en cours, ainsi que des boutons / fonctionnalités
+permettant de les manipuler.
+
+#### Bouton ajouter une nouvelle racine
+
+
+
+Ce bouton permet de rajouter un élément racine que l’on choisit via la
+fenêtre qui s’ouvre. Voir ci-dessous.
+
+
+
+##### Colonne des catégories
+
+
+
+Cette colonne sert à afficher les différentes catégories disponibles et
+de les afficher dans la colonne de visualisation du contenu de la
+catégorie sélectionnée.
+
+##### Colonne de visualisation du contenu de la catégorie
+
+
+
+Cette colonne sert à visualiser les différents éléments disponibles dans
+la catégorie sélectionnée dans la colonne des catégories.
+
+##### Colonne de prévisualisation
+
+
+
+Cette colonne sert à visualiser l’élément sélectionné dans la colonne de
+droite et permet de l’ajouter dans l’espace de travail avec « add new
+element ».
+
+Exemple de l’ajout de l’élément :
+
+
+
+#### Bouton cochable cacher/montrer les fils
+
+
+
+Cette case à cocher permet de cacher (ou afficher) les fils d’éléments
+avec lesquels on ne peut pas interagir dans Pyramid (élément non
+sérialisé).
+
+Exemple d’arborescence avec tous les enfants visibles :
+
+
+
+Lorsque les enfants ne sont pas visibles :
+
+
+
+#### Liste des fils dans l’espace de travail
+
+
+
+Cette liste permet de voir tous les éléments courants utilisés dans
+l’espace de travail, et permet d’observer l’arborescence courante du
+projet.
+
+On peut également interagir sur chaque élément avec un menu contextuel
+grâce au clic droit.
+
+### Menu contextuel clic droit
+
+Ce menu contextuel fonctionne uniquement dans les zones suivantes :
+
+- Fenêtre de navigation
+
+- Espace de travail (zone centrale)
+
+
+
+On peut apercevoir le menu contextuel qui affiche le nom, l’élément
+(class) et son Hash sur la première ligne.
+
+#### Rechercher l’élément sélectionné
+
+
+
+Ouvre la fenêtre suivante pour afficher la classe de l’élément. Voir
+ci-dessous.
+
+
+
+#### Inspection de l’élément sélectionné
+
+
+
+
+
+Permet de faire une inspection de l’élément comme si on le faisait
+depuis un playground.
+
+#### Ajout d’enfant et suppression d’élément
+
+
+
+L’ajout d’enfant permet de pouvoir ajouter un élément en tant que fils à
+l’élément sélectionné et donc de pouvoir l’ajouter à son arborescence.
+
+La suppression de l’élément sélectionné permet de supprimer l’élément
+ainsi que tous ses enfants.
+
+Exemple de suppression de plusieurs éléments :
+
+
+
+#### Modifier l’index d’un enfant dans son parent
+
+
+
+Ces 2 options permettent de modifier très facilement l’index des enfants
+sélectionnés dans leurs parents soit de l’augmenter soit de le réduire.
+
+Exemple avant déplacement :
+
+
+
+Exemple après déplacement :
+
+
+
+Il y a également des raccourcis clavier pour le faire (Page Up et Page
+Down).
+
+#### Grouper la sélection d’éléments
+
+
+
+Permet de grouper un ou plusieurs éléments sélectionnés dans un seul et
+même groupe lors d’une multi-sélection.
+
+#### Niveau sur le calque
+
+
+
+Permet de modifier le niveau sur le calque de l’élément sélectionné :
+
+- On foreground : place l’élément au premier plan
+
+- On background : place l’élément en dernier
+
+- Move forward : augmente d’un niveau de calque
+
+- Move backward : réduit d’un niveau de calque
+
+#### Copier/Coller
+
+
+
+Permet de copier un élément sélectionné et de coller cet élément sur
+l’espace de travail ou dans un autre élément qui est sélectionné.
+
+### Fenêtre des propriétés
+
+
+
+Voici la fenêtre des propriétés lorsqu’on ne sélectionne pas d’élément,
+cette fenêtre est constituée de 6 onglets suivant :
+
+- Props
+
+- Visual
+
+- Layout
+
+- Geo
+
+- Toplo-Theme
+
+- Playground
+
+#### Onglet propriétés (Props)
+
+Les propriétés disponibles pour chaque élément sélectionné peuvent être
+différentes selon la nature de l’élément.
+
+Voici les options possibles dans Props lorsque l’on sélectionne un
+élément :
+
+
+
+Element ID :
+
+C’est le nom en ID de l’élément sélectionné, pour le modifier il faut
+écrire quelque chose à la place du texte déjà présent dans ce champ de
+texte et **ne pas oublier de valider avec entrée** afin de rendre
+effective la modification sinon la modification n’est pas sauvegardée.
+
+Visibility :
+
+Permet de rendre :
+
+- Visible
: visible sur l’espace de
+ travail
+
+- caché
: caché sur l’espace de
+ travail
+
+- gone
: caché sur l’espace de
+ travail et n’est pas calculé par la disposition
+
+Elevation :
+
+Valeur de l’élément sur le calque renseigné en valeur entière modifiable
+ou visualisable.
+
+Clip children :
+
+Permet de rendre non visible les enfants d’un élément qui sortent de la
+taille du parent (dépasse de la taille du parent) si la valeur est True,
+l’inverse sinon.
+
+#### Onglet visuels (Visuals)
+
+C’est un onglet qui permet de définir les différentes propriétés
+graphiques de l’élément sélectionné : l’opacité, la couleur, les
+bordures, etc.
+
+
+
+#### Onglet de disposition (layout)
+
+
+
+Cet onglet permet de définir la position de l’élément dans son
+environnement, mais également de définir une disposition dans cet
+élément directement.
+
+Position :
+
+Emplacement en X et Y de l’élément sélectionné modifiable dans les deux
+champs de saisie.
+
+Remplissage :
+
+Définis un remplissage dans l’élément sélectionné selon la valeur dans
+le champ de saisie.
+
+Marge :
+
+Définis une marge dans l’élément sélectionné selon la valeur dans le
+champ de saisie.
+
+Type de disposition :
+
+##### Disposition basique
+
+
+
+La disposition basique permet de placer comme on veut sans contrainte
+particulière d’élément dans l’élément sélectionné.
+
+##### Disposition linéaire
+
+
+
+Vertical :
+
+
+
+L’élément vert est le premier élément et l’élément rouge est le
+deuxième, selon le sens de la flèche ci-dessus sur l’exemple.
+
+Horizontal :
+
+
+
+L’élément vert est le premier élément et l’élément rouge est le
+deuxième, selon le sens de la flèche ci-dessus sur l’exemple.
+
+La disposition linéaire permet d’aligner des éléments même jusqu’à
+dépasser la taille du parent.
+
+##### Disposition écoulement (Flow)
+
+Vertical :
+
+
+
+Horizontal :
+
+
+
+La flèche violette représente la première ligne de la disposition et la
+flèche rouge la deuxième ligne. Lorsqu’une ligne est remplie, les
+éléments sont ajoutés automatiquement à la ligne suivante. Ici,
+l’élément en rose est ajouté automatiquement à la seconde ligne.
+
+##### Disposition en cadre (Frame)
+
+
+
+Les différents réglages de position ne se font pas dans le parent mais
+dans les enfants de l’élément dans lequel il y a cette disposition.
+
+
+
+Les contraintes – Frame – horizontal / vertical servent uniquement au
+positionnement de cet élément-là dans son parent grâce à la disposition
+définie dans le parent.
+
+
+
+Cette option permet de ne pas aligner l’élément avec la disposition en
+cadre.
+
+#### Onglet géométrie (Geo)
+
+
+
+Cet onglet permet de choisir la forme géométrique de l’élément
+sélectionné, la géométrie sélectionnée sera celle visible sur le logo
+sélectionné.
+
+Certains éléments peuvent ne pas disposer de géométrie
+
+#### Onglet gestion de thème (Toplo-Theme)
+
+
+
+Cet onglet permet de définir et visualiser des thèmes en les appliquant
+soit sur l’espace de travail (BlSpace) soit sur les différents éléments
+dans l’espace de travail (thème local).
+
+Lorsqu’on sélectionne un élément sur l’espace de travail plusieurs
+actions sont possibles :
+
+- Ne pas hériter du thème du parent et de choisir le thème à appliquer
+ sur lui-même et ces enfants
+
+- Ajouter une étiquette (stamp) sur l’élément sélectionné (grisé si
+ aucun élément n’a été sélectionné).
+
+- Supprimer une étiquette sélectionnée dans le tableau d’étiquette listé
+ (grisé si aucune étiquette n’est sélectionnée).
+
+Exemple (aucun thème appliqué) :
+
+
+
+Exemple (après le thème appliqué) :
+
+
+
+Les étiquettes à ajouter pour un élément sélectionné sont listées selon
+le thème choisi pour cet élément.
+
+Exemple :
+
+
+
+Pour ajouter une étiquette il faut sélectionner l’étiquette que l’on
+veut attribuer et cliquer sur « Ajouter une étiquette ».
+
+Liste des étiquettes déjà utilisé sur l’élément sélectionné :
+
+
+
+Supprimer une étiquette :
+
+
+
+Une fois que l’on sélectionne une étiquette dans la liste, le bouton
+« Remove stamp » (Supprimer l’étiquette) devient cliquable et permet de
+supprimer l’étiquette sélectionné.
+
+##### Ajout de thème pour toplo theme manager
+
+Pour ajouter un thème à la liste des thèmes disponible dans le sélecteur
+pour le toplo theme manager, il faut ajouter une méthode de classe dans
+la classe du thème qui hérite ToTheme.
+
+Exemple :
+
+
+
+canBeDefault ^ true
+
+Si l’on veut retirer un thème spécifique du sélecteur, il faut modifier
+« true » par « false » :
+
+canBeDefault ^ false
+
+#### Onglet Playground
+
+Le Playground est un onglet qui permet d’effectuer des actions sur un ou
+des éléments sélectionnés grâce à du code Smalltalk (Pharo).
+
+Seuls les raccourcis claviers natifs à Pharo permettent de pouvoir
+exécuter des commandes dans le playground.
+
+
+
+Voici l’onglet lorsqu’on ne sélectionne aucun élément, voir ci-dessus.
+
+
+
+Les actions du Playground et s’exécutent sur le ou les éléments
+sélectionnés.
+
+Exemple avec un BlElement :
+
+Avant modification :
+
+
+
+Après modification :
+
+
+
+Grâce au message suivant la couleur du background est devenue noire :
+
+self background : Color black.
+
+Ceci n’est qu’un exemple mais la totalité des messages dans le
+Playground est possible comme nativement dans Pharo.
+
+La petite particularité, c’est que plusieurs éléments sélectionnés sont
+considérés comme un tableau d’objet, donc cette fois-ci la commande
+précédente ne fonctionnera pas car il faut exécuter la commande sur tous
+les éléments présents dans le tableau.
+
+Avant :
+
+
+
+La commande permet d’itérer sur chaque élément et d’appliquer la couleur
+rouge sur l’arrière-plan de chaque élément :
+
+self do: \[ :c \| c background: Color red \].
+
+Après :
+
+
+
+### Espace de travail
+
+L’espace de travail est la zone d’affichage des éléments graphiques du
+projet.
+
+Aperçu de la fenêtre :
+
+
+
+Le slider permet de modifier le facteur de zoom sur l’espace de travail,
+le bouton à sa droite permet de faire revenir à la valeur de zoom
+initiale (100%) de la vue sur l’espace de travail et la position de la
+souris est indiquée à côté.
+
+
+
+##
+
+## Fonctionnalités
+
+### Modification d’arborescence cliqué glissé / déposé
+
+Exemple :
+
+
+
+On peut apercevoir un élément dont le nom est « connect_pane » qui n’est
+pas au bon endroit, on peut donc le déplacer via un cliqué glissé depuis
+la liste d’éléments à gauche.
+
+Placé au bon endroit comme ci-dessous :
+
+
+
+Résultat :
+
+
+
+Le système fonctionne de la manière suivante :
+
+Tous les éléments sélectionnés qui sont déplacé via un cliqué glissé
+seront le fils de l’élément cible s’ils le peuvent.
+
+### Redimensionnement dynamique d’élément sélectionné
+
+
+
+: Modifie la taille de l’élément sélectionné dans la largeur mais
+uniquement dans le sens horizontal.
+
+: Modifie la taille de l’élément sélectionné dans la largeur mais aussi
+dans la hauteur de manière libre.
+
+: Modifie la taille de l’élément sélectionné dans la hauteur mais
+uniquement dans le sens vertical.
+
+Limitation de la modification de taille dynamique :
+
+- Lorsque la largeur de l’élément est en-dessous de 50, le carré pour
+ modifier la taille pour la hauteur disparaît.
+
+- Lorsque la hauteur de l’élément est en-dessous de 50, le carré pour
+ modifier la taille pour la largeur disparaît.
+
+- Lorsque la hauteur et la largeur est en-dessous de 15, le carré pour
+ modifier la hauteur et la largeur disparaît.
+
+Donc au moment du relâchement du clic gauche de la souris la taille est
+bien prise en compte mais une fois que vous voulez les réutiliser, il
+faut agrandir de manière manuel l’élément, le désélectionné et le
+sélectionner une fois de plus.
From 8db2483fd523ddf4d3b45175dcb1681988b7651b Mon Sep 17 00:00:00 2001
From: LANDAISB <116742582+LANDAISB@users.noreply.github.com>
Date: Mon, 15 Sep 2025 11:50:58 +0200
Subject: [PATCH 05/24] Add files via upload
---
media/image1.png | Bin 0 -> 24501 bytes
media/image10.png | Bin 0 -> 25388 bytes
media/image11.png | Bin 0 -> 11191 bytes
media/image12.png | Bin 0 -> 34220 bytes
media/image13.png | Bin 0 -> 11118 bytes
media/image14.png | Bin 0 -> 32432 bytes
media/image15.png | Bin 0 -> 16042 bytes
media/image16.png | Bin 0 -> 6560 bytes
media/image17.png | Bin 0 -> 1367 bytes
media/image18.png | Bin 0 -> 3153 bytes
media/image19.png | Bin 0 -> 1323 bytes
media/image2.png | Bin 0 -> 56715 bytes
media/image20.png | Bin 0 -> 23948 bytes
media/image21.png | Bin 0 -> 24149 bytes
media/image22.png | Bin 0 -> 24200 bytes
media/image23.png | Bin 0 -> 24062 bytes
media/image24.png | Bin 0 -> 24336 bytes
media/image25.png | Bin 0 -> 38920 bytes
media/image26.png | Bin 0 -> 1475 bytes
media/image27.png | Bin 0 -> 29224 bytes
media/image28.png | Bin 0 -> 15739 bytes
media/image29.png | Bin 0 -> 81855 bytes
media/image3.png | Bin 0 -> 41779 bytes
media/image30.png | Bin 0 -> 81716 bytes
media/image31.png | Bin 0 -> 81414 bytes
media/image32.png | Bin 0 -> 81723 bytes
media/image33.png | Bin 0 -> 35379 bytes
media/image34.png | Bin 0 -> 18147 bytes
media/image35.png | Bin 0 -> 170515 bytes
media/image36.png | Bin 0 -> 78378 bytes
media/image37.png | Bin 0 -> 31477 bytes
media/image38.png | Bin 0 -> 85072 bytes
media/image39.png | Bin 0 -> 30415 bytes
media/image4.png | Bin 0 -> 16117 bytes
media/image40.png | Bin 0 -> 295109 bytes
media/image41.png | Bin 0 -> 30412 bytes
media/image42.png | Bin 0 -> 40900 bytes
media/image43.png | Bin 0 -> 30504 bytes
media/image44.png | Bin 0 -> 116590 bytes
media/image45.png | Bin 0 -> 30640 bytes
media/image46.png | Bin 0 -> 8928 bytes
media/image47.png | Bin 0 -> 8251 bytes
media/image48.png | Bin 0 -> 30666 bytes
media/image49.png | Bin 0 -> 30537 bytes
media/image5.png | Bin 0 -> 12717 bytes
media/image50.png | Bin 0 -> 30515 bytes
media/image51.png | Bin 0 -> 20151 bytes
media/image52.png | Bin 0 -> 38119 bytes
media/image53.png | Bin 0 -> 2314 bytes
media/image54.png | Bin 0 -> 2142 bytes
media/image55.png | Bin 0 -> 1838 bytes
media/image56.png | Bin 0 -> 122028 bytes
media/image57.png | Bin 0 -> 77617 bytes
media/image58.png | Bin 0 -> 8129 bytes
media/image59.png | Bin 0 -> 16620 bytes
media/image6.png | Bin 0 -> 4372 bytes
media/image60.png | Bin 0 -> 2335 bytes
media/image61.png | Bin 0 -> 1664 bytes
media/image62.png | Bin 0 -> 3424 bytes
media/image63.png | Bin 0 -> 2478 bytes
media/image64.png | Bin 0 -> 8085 bytes
media/image65.png | Bin 0 -> 44023 bytes
media/image66.png | Bin 0 -> 10685 bytes
media/image67.png | Bin 0 -> 19832 bytes
media/image68.png | Bin 0 -> 33730 bytes
media/image69.png | Bin 0 -> 43388 bytes
media/image7.png | Bin 0 -> 11105 bytes
media/image70.png | Bin 0 -> 46242 bytes
media/image71.png | Bin 0 -> 15803 bytes
media/image72.png | Bin 0 -> 17229 bytes
media/image73.png | Bin 0 -> 19805 bytes
media/image74.png | Bin 0 -> 62957 bytes
media/image75.png | Bin 0 -> 29505 bytes
media/image76.png | Bin 0 -> 33516 bytes
media/image77.png | Bin 0 -> 38640 bytes
media/image78.png | Bin 0 -> 45805 bytes
media/image79.png | Bin 0 -> 69991 bytes
media/image8.png | Bin 0 -> 11380 bytes
media/image80.png | Bin 0 -> 70717 bytes
media/image81.png | Bin 0 -> 8376 bytes
media/image82.png | Bin 0 -> 34666 bytes
media/image83.png | Bin 0 -> 83850 bytes
media/image84.png | Bin 0 -> 67126 bytes
media/image85.png | Bin 0 -> 9444 bytes
media/image86.png | Bin 0 -> 38414 bytes
media/image9.png | Bin 0 -> 11194 bytes
86 files changed, 0 insertions(+), 0 deletions(-)
create mode 100644 media/image1.png
create mode 100644 media/image10.png
create mode 100644 media/image11.png
create mode 100644 media/image12.png
create mode 100644 media/image13.png
create mode 100644 media/image14.png
create mode 100644 media/image15.png
create mode 100644 media/image16.png
create mode 100644 media/image17.png
create mode 100644 media/image18.png
create mode 100644 media/image19.png
create mode 100644 media/image2.png
create mode 100644 media/image20.png
create mode 100644 media/image21.png
create mode 100644 media/image22.png
create mode 100644 media/image23.png
create mode 100644 media/image24.png
create mode 100644 media/image25.png
create mode 100644 media/image26.png
create mode 100644 media/image27.png
create mode 100644 media/image28.png
create mode 100644 media/image29.png
create mode 100644 media/image3.png
create mode 100644 media/image30.png
create mode 100644 media/image31.png
create mode 100644 media/image32.png
create mode 100644 media/image33.png
create mode 100644 media/image34.png
create mode 100644 media/image35.png
create mode 100644 media/image36.png
create mode 100644 media/image37.png
create mode 100644 media/image38.png
create mode 100644 media/image39.png
create mode 100644 media/image4.png
create mode 100644 media/image40.png
create mode 100644 media/image41.png
create mode 100644 media/image42.png
create mode 100644 media/image43.png
create mode 100644 media/image44.png
create mode 100644 media/image45.png
create mode 100644 media/image46.png
create mode 100644 media/image47.png
create mode 100644 media/image48.png
create mode 100644 media/image49.png
create mode 100644 media/image5.png
create mode 100644 media/image50.png
create mode 100644 media/image51.png
create mode 100644 media/image52.png
create mode 100644 media/image53.png
create mode 100644 media/image54.png
create mode 100644 media/image55.png
create mode 100644 media/image56.png
create mode 100644 media/image57.png
create mode 100644 media/image58.png
create mode 100644 media/image59.png
create mode 100644 media/image6.png
create mode 100644 media/image60.png
create mode 100644 media/image61.png
create mode 100644 media/image62.png
create mode 100644 media/image63.png
create mode 100644 media/image64.png
create mode 100644 media/image65.png
create mode 100644 media/image66.png
create mode 100644 media/image67.png
create mode 100644 media/image68.png
create mode 100644 media/image69.png
create mode 100644 media/image7.png
create mode 100644 media/image70.png
create mode 100644 media/image71.png
create mode 100644 media/image72.png
create mode 100644 media/image73.png
create mode 100644 media/image74.png
create mode 100644 media/image75.png
create mode 100644 media/image76.png
create mode 100644 media/image77.png
create mode 100644 media/image78.png
create mode 100644 media/image79.png
create mode 100644 media/image8.png
create mode 100644 media/image80.png
create mode 100644 media/image81.png
create mode 100644 media/image82.png
create mode 100644 media/image83.png
create mode 100644 media/image84.png
create mode 100644 media/image85.png
create mode 100644 media/image86.png
create mode 100644 media/image9.png
diff --git a/media/image1.png b/media/image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a7129b12ed928747dd61ea2d57cd0055f163c05
GIT binary patch
literal 24501
zcmd^ncU;rg+cr3A)mmF;-J?<$Vn_l?>k1@7lq3R)5L6Tbh71T2AS7-(Tvc0VTX9vb
zweD314%Aj#2ZB|pv$%1Bia@36bKU2BgLXW>$G-1B@8^9!zd=0tj&tsF-`9QJ*EuIs
z2dRVW)oEVG!^5MVGDIGZzfbYMkk?L?ZgWOZ3a0Ie#G&hYE=U( YhDl$i?~nypJE#VHSfQp`4!02D%O>X<(6Op1oC;{4T6uf`Ky>
zFaZdJ#n=jltEe}AusU30kYD+}vrIz}(!LVzCS69t=k)&co`9b!u$~8bPpKz;H_-|?
z*TU0smQ$i*$Cwb>=hJ)I^biS;E}KnPNHQ{5((_`(1Nriz$ax82j63s~78`zfYKK>w
z7l-1H`E6}$v6Q41+~PRTaWN_$VWAL1#w{$Y;5CWT`Q+F_UH$qdrF*z)Qf*)Djcxpj
z-cb&V8kC~HxhRp>Xk#H=KfCy{FGv&Hl45buE2|W Fcnrmn<;IeEdUEy(L
ztVuo4NXhOn*roL&O(4<^S{bkAI&5Q3)RN6N6NMVtN=;93S67{!$mKPb($Y~zDGm)P
z^qiIs*5m06O(hW1B0?*e1k_@fc8f~bW~5|wywzrZjeR&|qx`I;J+BbAZk*>#QP)t}
zSPO1lj7Fxo2x-}qL?y`24EnH{wkDKkGO9
S?K8dRzT
z=y#jf;;!y63MXNghak|8oI*)hR;ixVEt{y-qN)V0FEp0eqR!;_{N!|T1sgvD<|*4B
ztDW!ZanYM*)tTNf#V%qvy_uFxXWcBWJ+n2!gn-=-9RX)GIfXvcron}>sr>XS`PSj-
z%8Zw$g(Yyd`X-O_^l64MzK#oNf}n!e^zMhK57Ls77+gC1>RSx;-^ax#a=^fuJBXl2
zG+42)`-&(V`T`*nnngwtx~|f=1|hdPlN;0gP-n{dy|$db9dNb!qPb^FD=EY`bTAVa
zz3?<_GpJ1{v)h(`k5L_r0k_x)+)R?yIdSor-&
Hj84R3Cv`JpgG#`pEREK#}(=6>3htTLrY~E#8^sHUGV71lCxMP)VP>WC1^ROO?|SprLjz1AkDDE2sq7Td7oCSZyy>Z65e8jy-Qc?i-lg|*>Z
zJw*$)p%Hz+J!Uo(D6~ArgTa!7v{NHcla-eWM%)~dldO`^eB$4yYaV8=WN(~HG?)|=
zHDw+-K+mNy0ZiIs|3gUEwtyF}mcRXgAmXS@izv=Q0}lZ0=+5kfLe
zb70>$&EH(}w4RayyyKwiAAW`vCoUPN&7=>(r~9c#NjO84wIdKSe4Pf8z-ioem7;#n
zF#QHYyk{G{98HW%0H@-M(l0}gVom6*%C6-di4PTC@lzRyEo#1oNl-tswZ~2{Xf@Z0
z-qSDBO3^PX$7bv4S)ObcGm|Fr9lw4+x4Kof;c{L$?P$kd@a0WwoO3uLgC3uLY}Uwe
zcJ|Wfxh4H~3c$g5e*UL_;)RDMuXU&v##u)x;c3(8$C>o+*`@3Vdl(PXz@?!1$nTP@
zNs10SnYIlQ(x4;&uDn7F^7_a%iY1_O7LPcVCG>5@wxd#xBkVlPlvcI}&Yx<2CV!Oy
z=KsR75S^@InNU^E&!!RiRK;tkDEA5K+?Y{&kzt{*5Q?DXd!rTIm~4RvM2&}C4b%v*
z68a{Y(@I?VE@mFK@{9T&QPgD0YWRr)%m8MK%P=OvZC%0A-^bvlr$WOn;gVALb;8K;
zDEa;>lKAr{MZA}C(X!~zh_`5D^6dk`Z|Jg&$G9UDgrH)0KUH_;4z|=YOx6Gu4C+5E
z1#n6{MBirLm_3tV<6v5Nr@W&x#9?Jna9l{br