How to undo the dots on this grid?

Question

Refering to a live javascript playground at https://codepen.io/Maximusssssu/pen/MWrzpav?editors=1011 .When you click on the grid, it will put a triangle or a square depending on your liking using the buttons (triangle & square below the grid). However, I am trying to build an Undo function for both triangle and square. Can anyone offer me some guidance on this? Thank you for reading and have a nice day :) I use the code below to put square or triangle on the grid.

newDot.style.top = y + 'px';
newDot.style.left = x + 'px';
// Add the new element to the end of the body:
document.body.appendChild(newDot);

Answer 1

I would use Memento pattern to implement the undo functionality with the classes listed below.

Basically, the client (main function in my example) invokes const s = Grid.snapshot() method to take a snapshot of the current state of the Grid, and invokes History.push(s) to save the snapshot. When the client needs to undo the change, it retrieves the previous grid state, i.e. snapshot, by invoking const pre = History.pop(), and then feed the previous snapshot to the grid by Grid.restore(pre). The Grid.restore() method can internally invoke Grid.render() method to render the previous state of the grid, i.e. draw the previous set of dots.

Grid Class

Grid holds information about the grid, i.e. all the coordinates of the dots, shapes of the dots, etc.

Snapshot Class

Snapshot captures the state of the grid at some point in the past. Grid is responsible for producing an instance of Snapshot.

History Class

History saves all the previous states of the Grid by storing Snapshot objects. It it essentially a "stack", so it can push or pop a snapshot in a LIFO manner.

main

main function handle all the above objects to realize the required functionalities of the app.

---

UML Diagram

---

In order to implement the undo functionality separately for the square and triangle dots, I would tweak this design in such a way that it keeps track of two sets of previous states, one being the triangles and the other being squares. This would result in having two History objects, one recording previous states of square dots and the other recording those of triangle dots, as well as the Grid object producing separate snapshots for squares and triangles.