Undo Action in Pixel art editor

In pixel art editor undo action is work for remove element which we art in the editor. Always it remove the recent element from the editor and update the image.

Why we need it?

Sometimes we may have some mistakes when we art in the editor. Also some unnecessary things may be drawn. So we have to remove those unnecessary things. That’s why undo action is needed. Undo action is an important feature in this editor.

 

 

 

 

 

 

 

In picture1 and picture2 the mistakes or unnecessary elements are marked in a circle. We will use undo action to remove those.

How Undo works?

When we press the undo button the latest update is removed from the image. To find the latest update we need to save every update of the image. So we use an done array to save every update state. And to insert the image into the array we use a method historyupdatestate().

To remove the image this editor has an undo button to maintain it.

Firstly we the undo button to start undo action and then to update the picture a update State method is needed.

Undo button:

Undo button does not do everything. It just dispatch undo action when we click in undo button and disable itself when there is nothing to undo.

Here Undo action will be true on click the undo button.

State.done is an array of pictures which we draw in the editor. “State.done.lenght==0” define that there is no image in the array  that means no picture is drawn in the editor so nothing to undo. So undo button will be disabled.

Here we can see that undo button is disable when nothing is drawn and enable after drawing.

Image Update:

To update image based on action a historyUpdateState() method is used. When the action is undo then it check in done array for image. If it is empty then no update works otherwise the latest image will be removed from the array.

When we draw anything in editor the image will be saved in first position of done array.

 

If the action is contain a new picture and last picture is saved more than 1000 milliseconds ago. It takes the new picture as done[0] (first element of the done array) and the previous elements(pictures) are kept from done[1]. And object.assign() update the state.

In historyUpdateState() functions when action is undo it takes the most recent picture as current picture and make doneAt to zero. And state.done.slice(1) extract the pictures from done array. It update the array elements by deleting done[0] element which contains the latest picture. Here Object.assign() is used to update the property of the state.

here the latest image  has deleted after click undo button from done array.

After update the state it show the picture which is on the current state that is state.done[0].