0
324
Views¿Cómo deshacer los puntos en esta cuadrícula?
Refiriéndose a un patio de juegos javascript en vivo en https://codepen.io/Maximusssssu/pen/MWrzpav?editors=1011 . Cuando haga clic en la cuadrícula, se colocará un triángulo o un cuadrado según su gusto usando los botones (triángulo y cuadrado debajo de la cuadrícula). Sin embargo, estoy tratando de construir una función n Deshacer tanto para el triángulo como para el cuadrado . ¿Alguien puede ofrecerme alguna orientación sobre esto? Gracias por leer y que tengas un buen día :) Utilizo el siguiente código para poner un cuadrado o un triángulo en la cuadrícula.
newDot.style.top = y + 'px'; newDot.style.left = x + 'px'; // Add the new element to the end of the body: document.body.appendChild(newDot); 
1 answers
Answer question0
Usaría el patrón Memento para implementar la funcionalidad de deshacer con las clases que se enumeran a continuación.
Básicamente, el cliente (función principal en mi ejemplo) invoca el método const s = Grid.snapshot() para tomar una instantánea del estado actual de Grid e invoca History.push(s) para guardar la instantánea. Cuando el cliente necesita deshacer el cambio, recupera el estado anterior de la cuadrícula, es decir, la instantánea, al invocar const pre = History.pop() , y luego alimenta la instantánea anterior a la cuadrícula mediante Grid.restore(pre) . El método Grid.restore() puede invocar internamente al método Grid.render() para representar el estado anterior de la cuadrícula, es decir, dibujar el conjunto anterior de puntos.
Clase de cuadrícula
Grid contiene información sobre la cuadrícula, es decir, todas las coordenadas de los puntos, las formas de los puntos, etc.
Clase de instantánea
La instantánea captura el estado de la red en algún momento del pasado. Grid es responsable de producir una instancia de Snapshot.
Clase de historia
El historial guarda todos los estados anteriores de la cuadrícula almacenando objetos de instantánea. Es esencialmente una "pila", por lo que puede empujar o abrir una instantánea de manera LIFO.
principal
La función principal maneja todos los objetos anteriores para realizar las funcionalidades requeridas de la aplicación.
Diagrama UML
Para implementar la funcionalidad de deshacer por separado para los puntos cuadrados y triangulares, ajustaría este diseño de tal manera que realice un seguimiento de dos conjuntos de estados anteriores, uno de los cuales son los triángulos y el otro los cuadrados. Esto daría como resultado tener dos objetos Historial, uno que registra los estados previos de los puntos cuadrados y el otro que registra los de los puntos triangulares, así como el objeto Cuadrícula que produce instantáneas separadas para cuadrados y triángulos.