Project - Step 3 : Tools
************************


.. include:: ../BoutonGoogleTrad.rst



ToolBox
=======


Spécifications :

- La boîte à outils présente les différents outils de tracé : rectangle, cercle, triangle et texte...
- L'outil sélectionné doit être affiché avec un fond de couleur différente
- Le clic gauche sur un outil sélectionne cet outil de tracé


.. image:: toolbox.png
    :scale: 50%



Outils
======

Le client souhaite disposer d'outils de tracé interactifs permettant de créer des objets graphiques avec une prévisualisation en temps réel.

Pour chaque outil, un premier clic de souris déclenche une séquence de tracé.
Lorsque l'utilisateur déplace la souris, une représentation provisoire de l'objet apparaît sous la forme d'un fin contour violet, qui évolue en fonction des mouvements de la souris.
Une fois le tracé terminé, l'objet graphique définitif est ajouté à la scène en utilisant les caractéristiques données dans les différents panneaux (couleur, épaisseur du trait, remplissage, etc.).



Le fonctionnement de chaque outil repose sur les étapes suivantes :

#. **Activation du tracé**

   Un premier clic de souris initialise la création de l'objet  graphique.

#. **Tracé dynamique**

   Lorsque l'utilisateur déplace la souris, une représentation  provisoire de l'objet apparaît avec un trait violet fin.
   Cette prévisualisation évolue en temps réel en fonction des  mouvements du curseur, permettant à l'utilisateur d'ajuster la géométrie de l'objet.

#. **Finalisation du tracé**

   Une fois le dessin achevé, l'objet graphique définitif est ajouté à la scène.
   L'objet créé hérite des caractéristiques définies dans les différents panneaux.


Les animations ci-dessous illustrent le comportement attendu pour chacun des outils de tracé.



Outil Segment
-------------

.. image:: segment.gif
  :width: 400px


Outil Rectangle
---------------

.. image:: rectangle.gif
  :width: 400px

Outil Triangle
--------------

.. image:: triangle.gif
  :width: 400px

Demande supplémentaire : si l'utilisateur appuie sur la touche :cpp:`Backspace`, le dernier point créé est annulé.



Outil Cercle
------------

.. image:: cercle.gif
  :width: 400px

Outil Texte
-----------

Après avoir défini la position de départ du texte, chaque appui sur une touche du clavier ajoute une lettre au message.

L'appui sur la touche :cpp:`Enter` clôt la création du texte.


.. image:: text.gif
  :width: 400px

Hand-Coding Developer
---------------------

Pour les :cpp:`AI-Free Developer`, nous expliquons rapidement la mécanique utilisée pour créer un outil de tracé interactif.
Pour coder la logique des différents outils, on peut utiliser une machine à états. Par exemple, pour l'outil triangle :

- Etat A : attente du 1er clic
- Etat B : attente du 2eme clic
- Etat C : attente du 3eme clic

Le comportement de l'outil dépend de l'état courant :

- Dans l'état A, aucun point n'est présent, il n'y a pas de tracé à effectuer.
- Dans l'état B, un premier sommet a été placé, il faut tracer un trait violet allant de ce premier point à la position actuelle de la souris
- Dans l'état C, deux sommets sont connus. On trace en violet le segment les reliant, puis le segment qui relie le dernier sommet à la position de la souris

Pour passer d'un état à l'autre, il existe des transitions :

- A->B : transition déclenchée par le premier clic souris indiquant la position du premier point
- B->C : transition déclenchée par le deuxième clic souris indiquant la position du second point
- C->A : transition déclenchée par le troisième clic souris indiquant la position du troisième sommet, durant cette transition, l'objet graphique final est créé

Il existe des transitions supplémentaires pour gérer l'appui sur la touche :cpp:`Backspace`.
Traditionnellement, on code les états en utilisant une :cpp:`enum`.

Modélisation
============

Chaque outil peut être décrit comme une succession d’actions.
Son fonctionnement peut ainsi être représenté à l’aide d’un indicateur d’état qui détermine la fonction à exécuter : « si l’outil est dans l’état A, alors exécuter l’action correspondante ».

Cependant, chaque outil dispose de plusieurs données internes :

- Le premier point sélectionné
- ...

Et on n'y échappe pas : **données + comportements = classes**. Et oui ! Chaque outil doit être représenté par une classe.

Plusieurs questions de modélisation se posent alors :

- Comment représenter l'outil actif ?
- Allez-vous gérer chaque outil au cas par cas, comme ci-dessous ?


    .. code-block::

        if activeToolID == rectangleToolID

            rectangleTool.do(...)



.. panels::

    :column: col-lg-10 p-2

        **VIDEO** (max 1 min 40) : Choix de conception - le modèle - les outils



.. panels::

    :column: col-lg-10 p-2

        **VIDEO** (max 1 min 30) : Démonstration de chaque outil