Javascript retour à l'action précédente

Bonjour,

Je me permets de faire encore appel à vous. Dans le projet suivant : http://dessins-et-coloriages-pour-enfants.fr/coloriages_interactifs/princesse_et_fleurs/princesse_et_fleurs_grand.html je cherche à rajouter un dernier bouton image qui me permettrait juste de revenir à l’action antérieure de coloriage sans effacer tout le coloriage, càd juste la dernière action. J’ai fait de nombreuses recherches mais je n’ai rien trouvé qui fonctionne… onclick="goBack() … Une piste, une idée ?

Merci pour vos retours

Il va probablement falloir que tu enregistres la (ou les) dernière(s) action(s) pour pouvoir revenir à l’état précédent.

Il n’y a pas de navigation, donc le navigateur ne saura pas faire le travail à ta place.

Au passage, le HTML est un mélange de xHTML, de HTML5 et de techniques dépréciées depuis plus de 10 ans… il faudrait penser à nettoyer tout ça si tu veux qu’on y jette un œil facilement.

Ok, je comprends le principe. Nettoyer tout ça… impossible pour moi, je bricole, je cherche, j’assemble, j’essaie… mais je ne sais pas programmer. Mais bon si je n’y arrive pas, ce n’est pas grave, le résultat obtenu actuel même s’il date et n’est pas très académique, me convient pour le moment. Merci pour votre réponse.

C’est à toi d’implémenter ce comportement, le navigateur ne sait pas le faire nativement.

Il y a plusieurs approches possibles mais la plus simple me semble être un algorithme de ce genre : après chaque action, tu enregistres l’état du dessin. Concrètement tu peux enregistrer le contenu du <svg>...</svg> dans une variable. Si l’utilisateur annule son action, il suffit de restituer en remplaçant, dans le DOM, le dernier svg gardé en mémoire.

Je pense à un truc comme ça :

// L'utilisateur a fait une action, on enregistre ce nouvel état au cas où il annule la prochaine :
var last = document.querySelector('div#main > svg').cloneNode(true);

// L'utilisateur annule, on restitue l'ancien état
document.querySelector('div#main > svg').replaceWith(last);

Si tu veux enregistrer les états successifs pour annuler plusieurs actions en arrière, il suffit d’empiler cela dans une liste plutôt que d’utiliser une seule variable :

// L'utilisateur a fait une action, on enregistre ce nouvel état au cas où il annule la prochaine :
let last = document.querySelector('div#main > svg').cloneNode(true);
previous_states.push(last);

// L'utilisateur annule, on restitue l'ancien état
let last = previous_states.pop();
document.querySelector('div#main > svg').replaceWith(last);

Cette solution me semble pas idéale, et je crains que cette manipulation du DOM soit peu optimale… Mais c’est la seule approche qui me paraît possible dans ton code actuel. Dans un cas idéal, je pense qu’il faudrait dissocier les données et leur rendu. Cela permettrait d’enregistrer non pas une partie du DOM mais plutôt des objets simples sur lesquels il suffirait ensuite d’invoquer un rendu, par exemple.

Sans découplage, on est obligé de manipuler directement le DOM qui est à la fois le porteur de données et le rendu. Si les données et le rendu sont découplés, le pattern est de mettre à jour ton état (les données), et d’invoquer aussitôt un rendu sur cet état, le rendu étant une fonction qui a pour mission de prendre un état et de faire en sorte que le bon code SVG correspondant soit chargé dans le DOM.

Bonjour,

Peut-être qu’il est possible de procéder de la manière suivante : lorsque l’utilisateur clique à un endroit sur le dessin avant de changer la couleur on conserve l’information de la couleur précédente et de l’endroit où l’utilisateur a cliqué

Pour revenir en arrière tu as juste à appliquer la dernière action avec la couleur stockée, tu peux stocker cela dans une liste ou dans un tableau.

Par exemple si un dessin a 1 zone (initialement blanche)

• L’utilisateur cliques sur la zone 1 avec la couleur bleu Le tableau est maintenant [{zone: 1, couleur: blanc}]

• L’utilisateur cliques sur la zone 1 avec la couleur rouge Le tableau est maintenant [{zone: 1, couleur: blanc}, {zone: 1, couleur: bleu}]

• L’utilisateur cliques sur la zone 1 avec la couleur bleu Le tableau est maintenant [{zone: 1, couleur: blanc}, {zone: 1, couleur: bleu}, {zone: 1, couleur: rouge}]

Et ainsi de suite. Pour revenir en arrière d’une étape tu regardes le dernier élément du tableau

• L’utilisateur revient en arrière -> on colorie la zone 1 en rouge Le tableau est maintenant [{zone: 1, couleur: blanc}, {zone: 1, couleur: bleu}

La méthode @Jeph est plus simple en effet, si tu ne comptes gérer que l’action du coloriage de zone. (ce qui semble être le cas en ce moment n’est-ce pas ?)

Waouh ! Merci beaucoup pour vos réponses. Je comprends l’aspect analyse. Effectivement la méthode de @Jeph est bien celle que je cherche à atteindre. Mais je dois avouer que je ne m’attendais pas à un tel niveau de difficulté technique pareil car, pour moi, la mise en oeuvre d’une telle méthode, me semble être bien au-delà de mes capacités… pour le moment. Ben, va falloir que je mette sérieusement au boulot Quand vous parlez d’enregistrer, de tableaux… il s’agit de tables MySql… on parle de php ?

Quand vous parlez d’enregistrer, de tableaux… il s’agit de tables MySql… on parle de php ?

Je parlais de tableaux JavaScript et je pense que Jeph aussi, en l’occurrence. Tu peux aussi enregistrer l’état côté serveur (PHP/MySQL), mais ça n’a d’intérêt que si tu as besoin de préserver l’état à long terme et à travers les sessions pour les restituer plus tard au client. As-tu vraiment besoin de cela ?

Dans le tableau JavaScript, l’état sera perdu quand l’utilisateur fermera la page.

Oui, c’est ça, un tableau javascript. Merci. J’avance doucement dans la compréhension du processus.