Robot

Le poste de contrôle (PC) / Les graphes /
Droit à l'erreur : Undo & Redo

Parcours de l'historique par undo & redo

Avant-propos

Réviser ou étudier :

Python : Les listes deque.

Refactoring :

Éviter les exécutions de code inutiles dans UiNode lors des secousses, en filtrant sur le bouton gauche.
Remplacer UiNode.mousePressEvent() par :

    def mousePressEvent(self, ev):
        """ Crée la liste des court-circuits faisables sur ce node : o_node.l_shortables.
        Un court-circuit est un tuple de 2 objets o_gredge : (o_gredge en entrée, o_gredge en sortie). """
        if ev.button() == Qt.LeftButton:
            self.o_node.set_shortables()
        super().mousePressEvent(ev)

Remplacer UiNode.mouseMoveEvent() par :

    def mouseMoveEvent(self, ev):
        if ev.buttons() & Qt.LeftButton:
            self.o_node.shake()
        super().mouseMoveEvent(ev)

L'utilisation de getcwd() pose parfois des problèmes selon le contexte :
- Dans UiMain.open_graph(), remplacer cette ligne :
  backups_folder = os.path.abspath(f"{os.getcwd()}{os.sep}..{os.sep}backups")
  Par celle-ci :
```
        backups_folder = os.path.abspath(f"{os.path.dirname(__file__)}/../backups")
```
  Vérifier le bon fonctionnement de l'ouverture d'un graphe.
- Dans NewGraph.accept(), remplacer cette ligne :
  bk_folder = f"{os.getcwd()}{os.sep}..{os.sep}backups"
  Par celle-ci :
```
        bk_folder = os.path.abspath(f"{os.path.dirname(__file__)}/../backups")
```
  Vérifier le bon fonctionnement de la création d'un graphe.
Dans CtrlScene, renommer delete_items() en remote_items()

En conséquence, modifier le point d'appel (il n'y en a qu'un), dans UiView.keyReleaseEvent().
UiView.keyReleaseEvent() :

    def keyReleaseEvent(self, ev):
        super().keyReleaseEvent(ev)
        key = ev.key()
        if key == Qt.Key_Delete:
            self.o_scene.delete_items()
        if key == Qt.Key_Tab:
            self.o_scene.cross_edges()

Description

Super-dictionnaires od_pkl successifs dans le temps.

Principe :

dq_histos est une liste de type deque, vide au lancement de l'application.
Après chaque modification du graphe, le super-dictionnaire od_pkl est ajouté à cette liste, le pointeur avance en dernière place.
La particularité d'un deque est d'être limité en taille :
- Lorsque le deque atteint sa taille max, le 1er élément est supprimé, le nouvel élément peut alors être ajouté à la fin.
- La taille du deque reste alors constante, évitant ainsi une occupation inutile de la mémoire.
- Dans notre script, la taille max est fixée à 100, mais vous pouvez modifier cette valeur.
Le undo-redo permet le droit à l'erreur :
- A tout moment, on peut rétablir un état antérieur grâce à la fonction undo, qui déplace le pointeur vers le début, pas à pas.
- Si l'on remonte trop dans le temps, on peut revenir vers le présent avec la fonction redo, qui ramène le pointeur vers la fin.
- Si le pointeur est en position 0, on ne peut plus faire de undo.
- Si le pointeur est en position finale, on ne peut plus faire de redo.

Mise en pratique :

L'application peut afficher plusieurs scènes (chacune dans un onglet de la zone centrale).
Chaque scène va gérer ses propres "Undo-Redo", grace à un objet o_ur.
Il suffit donc :
- De créer une classe UndoRedo.
- De l'instancier à chaque scène.
- D'ajouter 2 boutons dans la barre d'outils de la fenêtre :
  - Le bouton Undo avec son raccourci-clavier Ctrl + Z.
  - Le bouton Redo avec son raccourci-clavier Ctrl + Y.

Limites :

Les modifications de la scène et de la vue ne seront pas prises en compte :
- Couleurs de fond, des traits.
- Grille : magnétisme et pas, épaisseurs des traits.
Seuls les nodes et les edges seront pris en compte :
- Création, suppression, modification.
- Édition des paramètres, couleurs, croisements, etc.

Ajoutez 2 boutons dans la barre d'outils :

, revoir si nécessaire les tutos antérieurs ou visionner la vidéo.

Au lancement de l'appli, dictionnaire dq_histos vide (Undo et Redo désactivés).

Des modifications, pointeur à la fin (Redo désactivé).

Des modifications, pointeur au début (Undo désactivé)

Des modifications, pointeur à l'intérieur, ni au début ni à la fin.

Ajoutez les boutons Undo et Redo avec Qt Designer. :

Les noms d'action, utilisés en programmation et définis dans Qt Designer, sont : actionUndo et actionRedo.
Les tooltips sont également définis dans Qt Designer : Undo (Ctrl + Z) et Redo (Ctrl + Y)
Les raccourcis-clavier sont également définis dans Qt Designer : Ctrl + Z et Ctrl + Y.

Fichier /pc/undo_redo.py, contenant la classe UndoRedo :

import copy
from collections import deque


class UndoRedo:
    """ Instancié par CtrlScene. """
    def __init__(self, o_scene):
        self.o_scene = o_scene
        self.pointer = 0
        self.b_action = False
        self.b_undo = False
        self.b_redo = False
        """ Les éléments de la liste dq_histo sont les super-dictionnaires od_pkl successifs dans le temps. """
        self.dq_histos = deque([copy.deepcopy(self.o_scene.o_pkl.od_pkl)], maxlen=100)    # Taille de l'histo = maxlen

    def state(self):
        """ État des icones 'Undo' et 'Redo' dans la toolbox. """
        histo_max = len(self.dq_histos) - 1
        self.b_undo = self.pointer > 0
        self.b_redo = self.pointer < histo_max
        """ État des boutons : actifs ou grisés. """
        self.o_scene.o_main.actionUndo.setEnabled(self.b_undo)
        self.o_scene.o_main.actionRedo.setEnabled(self.b_redo)

    def add_do(self):
        """ Le code appelant doit lever le flag b_action pour que le nouvel état soit ajouté à l'historique. """
        if self.b_action:
            """ Option : Suppression de tous les éléments après le pointeur. Décommenter pour l'activer. """
            # histo_max = len(self.dq_histo) - 1
            # for i in range(histo_max - self.pointer):
            #     self.dq_histo.pop()

            """ Ajout. Si maxlen est atteint, le 1er élément (le plus ancien) est automatiquement supprimé. """
            self.dq_histos.append(copy.deepcopy(self.o_scene.o_pkl.od_pkl))

            """ Pointeur placé à la fin. """
            self.pointer = len(self.dq_histos) - 1
            self.state()

            """ Histo à jour => On baisse le drapeau. """
            self.b_action = False

    def undo(self):
        if self.b_undo:
            self.pointer -= 1
            self.show()

    def redo(self):
        if self.b_redo:
            self.pointer += 1
            self.show()

    def show(self):
        """ Le super-dictionnaire od_pkl est surchargé par l'élément pointé de l'historique. """
        self.state()
        self.o_scene.o_pkl.od_pkl = copy.deepcopy(self.dq_histos[self.pointer])
        self.o_scene.o_pkl.backup()
        self.o_scene.show_items()

Ajoutez cette déclaration dans CtrlScene.__init__() :

        self.o_ur = None            # Instance de UndoRedo.

Ajoutez cette affectation dans CtrlScene.setup(), ne pas oublier d'importer UndoRedo :

        """ Undo-Redo. """
        self.o_ur = UndoRedo(self)

Coding :

Nous allons coder de façon peu habituelle : en rectifiant le code par corrections successives ...

... un peu à la manière des TDD, mais avec un contrôle visuel.

Supposons le problème résolu, et lançons l'application :

Afficher plusieurs onglets contenant des graphes, par exemple Couleurs, Court-circuits et Croisements du tuto précédent.

Cela nous servira de base pour cet exercice.

Vous noterez qu'au fur et à mesure, nous découvrirons des bugs oubliés ; nous en profiterons pour les corriger.

Si vous êtes programmeur débutant, bienvenue au club !

Les problèmes rencontrés sont les suivants :

Problème 1 : Les boutons Undo et Redo devraient être désactivés au démarrage.
Problème 2 : Lorsqu'on fait une modification, il ne sa passe rien, les boutons restent désactivés.
1. Problème 2.1 : La méthode add_do() est appelée lorsqu'on clique simplement sur un node, sans même le déplacer.
  1. Problème 2.1.1 : Lorsque la grille n'est pas magnétique, le tooltip du node affiche la position avec un grand nombre de décimales.
2. Problème 2.2 : Mitraillage : L'appel de la méthode add_do() apparaît autant de fois qu'il y a de nodes sélectionnés, déplacés dans le graphe.
3. Problème 2.3 : L'historique dq_histos n'a pas été incrémenté, les 2 boutons restent désactivés.
Problème 3 : Suite à une modification, lorsqu'on clique sur le bouton Redo, rien ne se passe.
Problème 4 : La méthode CtrlScene.show_items() est absente.

Problème 1

Retour au plan

Les boutons devraient être désactivés au démarrage.
Or on a ceci : au lieu de celà :
Pourquoi ?
- La méthode UndoRedo.state() doit être appelée, c'est elle qui fixe l'état des boutons.
- Or il n'y a que 2 boutons (Undo et Redo), alors qu'il peut y avoir plusieurs scènes, c'est à dire plusieurs onglets.
- L'état des boutons pourra donc être différent selon l'onglet sélectionné.
Solution : Par conséquent, il faut affecter l'état de ces boutons à chaque changement d'onglet (tab_changed()).
Insérer cette ligne dans UiMain.tab_changed(), juste avant ut.save_tabs() :
```
        o_scene.o_ur.state()
```
Vérification : pour chaque onglet, les 2 boutons sont bien désactivés au démarrage.

Problème 2

Retour au plan

Lorsqu'on fait une modification, il ne sa passe rien, les boutons restent désactivés.
Pourquoi ?
- A chaque modification, il faudrait appeler la méthode add_do() qui ajoute un élément dans l'historique.
- Les modifications étant enregistrées en temps réel, cet instant peut être capturé dans Pkl.backup(), juste après le pickle.dump().
Solution :
- Appeler add_do() dans Pkl.backup(), à la fin, avant le return True :
```
        self.o_scene.o_ur.add_do()      # Undo-Redo.
```
- Placer un print() provisoire en 1ère ligne de UndoRedo.add_do() :
```
        print('add_do')
```
Vérification : L'affichage du print() a bien lieu, mais 3 problèmes apparaissent :
- Cet affichage apparaît lorsqu'on clique sur un node alors qu'il n'y a aucune modification → Problème 2.1.
- Mitraillage : Cet affichage apparaît autant de fois qu'il y a de nodes dans le graphe → Problème 2.2.
- L'historique dq_histos n'a pas été incrémenté, les 2 boutons restent désactivés → Problème 2.3.
- Traitons ces problèmes l'un après l'autre ...

Problème 2.1

Retour au plan

La méthode add_do() est appelée lorsqu'on clique simplement sur un node, sans même le déplacer.
Pourquoi ?
- UiNode.save_pos() est appelée (indirectement, via la scène) lorsqu'on clique sur un node.
- On voit en dernière ligne l'appel du backup.

Solution : Il faut rendre cet appel conditionnel : seulement si la position du node a changé. Pour cela, il faut :

Créer un attribut qui mémorise la position du node.
Ajouter, dans UiNode.__init__() :
```
        self.pos_ante = None
```
Affecter sa valeur au démarrage.
Ajouter, dans UiNode.init_ui() (après setPos()) :
```
        self.pos_ante = self.o_node.pos
```

On peut enfin appeler le backup de manière conditionnelle (seulement si la position a été modifiée).
UiNode.save_pos() :

    def save_pos(self):
        x, y = self.pos().x(), self.pos().y()
        b_magnetic = self.o_node.o_scene.get_param('Grille magnétique')
        if b_magnetic:
            mesh = int(self.o_node.o_scene.get_param('Pas de la grille', 16))
            x, y = mesh * round(x/mesh), mesh * round(y/mesh)
            self.setPos(x, y)

        if self.pos_ante != (x, y):
            self.od_pkl.write([self.s_id, 'position'], (x, y))
            self.o_node.o_scene.o_pkl.backup()
        self.pos_ante = (x, y)      # Mémorisation de la position.

Vérification :
- Lorsqu'on clique simplement sur un node, il ne se passe rien.
- Lorsqu'on déplace un node, on a bien l'affichage du print().
- On remarque 2 défauts qui sont hors sujet, mais que nous sommes tenus de corriger → Problème 2.1.1.
  - Lorsque la grille n'est pas magnétique, le tooltip du node affiche la position avec un grand nombre de décimales.
  - Le tooltip du node affiche sa position, or, lorsque le node est déplacé, le tooltip ne change pas !

Problème 2.1.1

Retour au plan

Lorsque la grille n'est pas magnétique, le tooltip du node affiche la position avec un grand nombre de décimales.
Le tooltip du node affiche sa position, or, lorsque le node est déplacé, le tooltip ne change pas !

Solution :

Supprimer la ligne self.ToolTip(.....) de la méthode UiNode.init_ui().

Remplacer la méthode UiNode.set_title() :

    def set_title(self):
        title = self.o_node.get_param('Titre du node', 'Le titre')
        self.setToolTip(f"{title}\n{round(self.pos().x()), round(self.pos().y())}")
        self.title_item.setPlainText(title)

La méthode save_pos() doit encore être modifiée pour actualiser le tooltip.
UiNode.save_pos() :

    def save_pos(self):
        x, y = self.pos().x(), self.pos().y()
        b_magnetic = self.o_node.o_scene.get_param('Grille magnétique')
        if b_magnetic:
            mesh = int(self.o_node.o_scene.get_param('Pas de la grille', 16))
            x, y = mesh * round(x/mesh), mesh * round(y/mesh)
            self.setPos(x, y)

        if self.pos_ante != (x, y):
            self.od_pkl.write([self.s_id, 'position'], (x, y))
            self.setToolTip(f"{self.o_node.get_param('Titre du node', 'Le titre')}\n{round(x), round(y)}")
            self.o_node.o_scene.o_pkl.backup()
        self.pos_ante = (x, y)      # Mémorisation de la position.

Vérification : OK.

Problème 2.2

Retour au plan

Mitraillage : L'affichage du print() apparaît autant de fois qu'il y a de nodes sélectionnés, déplacés dans le graphe.
Autrement dit, lors du déplacement d'une multi-sélection, on fait un usage abusif des accès au disque dur.
Pourquoi ?
- Simplement parce que chaque node déplacé appelle sa méthode save_pos(), qui contient l'appel au backup global.

Solution :

La méthode delay() que nous avions codée dans la classe DateTime permett cela :
Si des appels répétés à cette méthode ont lieu, seul le dernier sera pris en compte.
La méthode Pkl.backup() devient :

    def backup(self):
        """ Méthode appelée chaque fois qu'une modification intervient dans le graphe.
        - Les opérations sur disque dur sont chronophages.
        - Le delay permet un anti-mitraillage : seul le dernier appel d'une répétiton est traité.
        - En mode asynchrone (par défaut), la méthode est temporisée et ne retourne rien.
        - En mode synchrone, la méthode est immédiate et retourne le succès : True ou False.
        """
        def delayed():
            try:
                with open(self.fic_pkl, 'wb') as pk:  # 1) Ouveture ET écrasement du fichier pkl.
                    pickle.dump(self.od_pkl, pk, pickle.HIGHEST_PROTOCOL)  # 2) Écriture dans un fichier vierge.
            except (Exception,):
                return False
            """ Enregistrement réussi. """
            self.o_scene.o_ur.add_do()      # Undo-Redo.
            return True

        self.dt.delay(delayed)      # Exécution temporisée.

Oui mais ... il faut déclarer self.dt et importer la classe DateTime.
Ajouter cette ligne dans Pkl.__init__() :
```
        self.dt = DateTime()
```

Vérification - Déplacer une multi-sélection :
- OK, maintenant, le print() n'affiche son message qu'une seule fois.

Problème 2.3

Retour au plan

L'historique dq_histos n'a pas été incrémenté, les 2 boutons restent désactivés.
Pourquoi ?
- Lorsqu'on examine le code de UndoRedo.add_do(), on s'aperçoit que le code n'est exécuté que si le flag b_action est levé.
- Or ce flag est déclaré et instancié à False dans __init__(), puis n'est modifié nulle part ailleurs.

Solution : Il faut d'abord savoir quelles sont les modifications à historiser, puis à quel endroit du code, et à quelle(s) condition(s) le drapeau b_action sera levé.

Quelles sont les modifications à considérer ?
- ~~Scène et vue~~ : maille, traits (épaisseur, couleur), couleur de fond, ... ← Non historisable.
- Édition de nodes : création, modification, suppression, déplacements, paramètres, état ← Historisable.
- Édition des edges : Création, suppression, état ← Historisable.

A quels endroits du code lève-t-on ce drapeau ? ... le bon sens nous guide rapidement :

Dans CtrlScene.delete_items(), à la ligne avant le backup() :

            self.o_ur.b_action = True       # Ajout dans l'historique du "Undo-Redo".

Dans CtrlScene.save_edges(), à la ligne avant le backup() :

            self.o_ur.b_action = True       # Ajout dans l'historique du "Undo-Redo".

Dans UiNode.save_pos(), à la ligne avant le backup() :

            self.o_scene.o_ur.b_action = True

Il y a plusieurs modifications dans Parameters.change() :

    def change(self, _, l_params):
        """ 1 - Mise à jour du dictionnaire od_real. """
        o_param = l_params[0][0]
        od_param = Dictionary(o_param.__dict__)

        value = o_param.value()
        if isinstance(value, QColor):
            value = value.name()
        l_keys = od_param.read(['opts', 'l_keys'])
        self.od_real.write([self.o_parent.s_id] + l_keys, value)
        if self.o_parent.__class__.__name__ == 'Node':
            self.o_scene.o_ur.b_action = True

        """ 2 - Enregistrement. """
        self.o_scene.o_pkl.backup()
        self.set_params()
        self.o_parent.refresh(l_keys)

Vérification :
- Le bouton Undo s'active → OK.
- Oui mais ... lorsqu'on clique dessus, rien ne se passe → Problème 3.

Problème 3

Retour au plan

Suite à une modification, lorsqu'on clique sur le bouton Redo, rien ne se passe.
Pourquoi ?
- Tout simplement parce que les événements sur les boutons Undo et Redo n'ont pas encore été codés.
  (Revoir comment nous avions traité ce problème pour les boutons New et Open)

Solution :

Dans UiMain.set_events(), ajouter ces 2 lignes :

        self.actionUndo.triggered.connect(self.undo)
        self.actionRedo.triggered.connect(self.redo)

Oui mais ... les méthodes undo() et redo() n'existent pas dans UiMain. On les ajoute.
UiMain.undo() et UiMain.redo() :

    def undo(self):
        self.o_scene.o_ur.undo()

    def redo(self):
        self.o_scene.o_ur.redo()

Oui mais ... elles utilisent l'attribut o_scene qui est la scène en cours, mais qui n'existe pas.
On le déclare ; dans UiMain.__init__(), ajouter cette ligne :

        self.o_scene = None

On l'affecte, évidemment, dans UiMain.tab_changed() :

    def tab_changed(self, index=-1):
        """ Hook.
        :param index: Automatiquement renseigné par le connect de 'currentChanged'.
        :return: NA.
        """
        indx = index if index >= 0 else self.tabGraphs.currentIndex()
        if indx < 0:
            self.o_scene = None
            return      # Si aucun onglet affiché.
        self.o_scene = self.tabGraphs.widget(indx)
        # self.o_scene.show_params()    # Devenu inutile suite à l'implémentation de CtrlScene.show_items().
        self.o_scene.o_ur.state()
        ut.save_tabs(self)              # On restitue la fonction première de self.tabGraphs.currentChanged

Vérification :
- Cette fois-ci on exécute bien la méthode undo() en cliquant sur son bouton. On avance ...
- Oui mais ... on obtient une erreur : la méthode CtrlScene.show_items() n'existe pas ← Problème 4.

Problème 4

Retour au plan

La méthode CtrlScene.show_items() est absente. On l'ajoute.
CtrlScene.show_items() :

    def show_items(self):
        """ Reset : suppression de tous les items. """
        l_gritems = self.o_grscene.items()
        for gritem in l_gritems:
            self.o_grscene.removeItem(gritem)

        """ Affichage des nodes mémorisés dans les paramètres. """
        self.show_nodes()

        """ Affichage des edges mémorisés dans les paramètres. """
        self.show_edges()

        """ Aucun item sélectionné => Paramètres de la scène. """
        self.show_params()

On voit qu'elle appelle l'ajout des nodes et celui des edges : show_nodes() et show_edges().
De plus, puisque les undo et redo effectuent un réaffichage de la scène, il est nécessaire de tout nettoyer d'abord.
D'où la présence du reset préalable : nettoyage de toute la scène.
Enfin, pour synchroniser l'affichage des paramètres avec le nouveau graphe affiché, la méthode show_params() est appelée.

Vérification : Tout fonctionne !

Option :

On peut améliorer le code en remplaçant 2 lignes vers la fin du CtrlScene.setup(), par une seule.

Supprimer ces lignes :

        """ Affichage des nodes mémorisés dans les paramètres. """
        self.show_nodes()

        """ Affichage des edges mémorisés dans les paramètres. """
        self.show_edges()

Les remplacer par celles-ci :

        """ Affichage des items : nodes et edges, mémorisés dans les paramètres. """
        self.show_items()

A noter, la ligne show_params() commentée dans la méthode tab_changed(), un peu au dessus (Problème 3).
Si vous refusez cette option, vous devrez décommenter cette ligne.

Bonjour les codeurs !

Commentaires & questions

Laissez vos commentaires et vos questions sur Youtube !