Implementación de la función Deshacer y Rehacer javascript y php

Question

Deseo implementar la funcionalidad Deshacer y Rehacer no solo para el lado del cliente sino también para el lado del servidor. Por insatnce tengo una imagen que contiene div y puedo rotar el tamaño y volver a escribirlo, todas las operaciones básicas para la generación de imágenes. Y todas las operaciones actualizan databse e image. Puedes decir que mi imagen se está regenerando y que la base de datos se actualiza después de cada acción.

Ahora necesito implementar la funcionalidad Deshacer y Rehacer. He hecho algunas investigaciones también. Lo que necesito es el mejor enfoque sobre cómo implementar la tarea requerida. Estaba pensando en mantener cada acción "tipo de registro cosa" o manejarlo con base de datos o con javascript arrays incluyendo HTML o qué más ??

cuál es el mejor enfoque para lograr mi objetivo.

Gracias,

Answer 1

En un nivel básico, se necesitan dos cosas:

• una pila de operación (matriz), 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 la agrega a la matriz. Cuando el usuario golpea deshacer, puede eliminar el último elemento de la matriz.

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

Si desea la funcionalidad 'rehacer', entonces necesitaría una segunda pila de operaciones. Cada vez que se deshace una operación, la agrega al final de la pila de rehacer. Si el usuario pulsa 'Rehacer', lo vuelve a mover a la pila de operaciones.

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

Answer 2

Mi administrador de deshacer de JavaScript usa el patrón de comando. Básicamente, para cada acción, también implementa una acción de deshacer y otra de rehacer. Puede construir la misma funcionalidad en el lado del servidor.

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

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