Saltar al contenido

Implementando la funcionalidad Deshacer y Rehacer javascript y php

Posterior a de nuestra prolongada compilación de información resolvimos este conflicto que pueden tener algunos usuarios. Te brindamos la respuesta y nuestro objetivo es resultarte de mucha ayuda.

Solución:

En un nivel básico, necesitas dos cosas:

  • una pila de operaciones (array) que realiza un seguimiento de las operaciones que se han realizado. Cuando el usuario realiza una operación, crea un objeto que describe la operación y lo agrega a la array. Cuando el usuario pulsa deshacer, puede eliminar el último elemento de la array.

  • cada tipo de operación necesita un método de ‘guardar’ y un método de ‘deshacer’. Esto puede ser complicado, ya que algunos métodos de ‘deshacer’ son similares a su método de ‘guardar’ (es decir, para deshacer un giro horizontal, simplemente haga otro giro), mientras que otros no tienen esa simetría (es decir, para deshacer un recorte, tendría que almacenar los datos de la imagen como estaban antes de que ocurriera el recorte).

Si desea la funcionalidad ‘rehacer’, necesitará una segunda pila de operaciones. Cada vez que se deshacía una operación, la agregaba al final de la pila de rehacer. Si el usuario presiona ‘Rehacer’, lo vuelve a mover a la pila de operaciones nuevamente.

Puede ser útil mirar el patrón de Comando (http://en.wikipedia.org/wiki/Command_pattern), ya que a menudo se usa para implementar Deshacer.

Mi administrador de deshacer javascript usa el patrón de comando. Básicamente, para cada acción también implementas una acción de deshacer y una acción de rehacer. Podrías construir la misma funcionalidad en el lado del servidor.

https://github.com/ArthurClemens/Javascript-Undo-Manager

Y este es un claro ejemplo de código del patrón de comando: https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/command.html

Si aceptas, tienes la opción de dejar un escrito acerca de qué le añadirías a este escrito.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *