pixel-editor/js/_history.js

var undoStates = [];
var redoStates = [];

const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';

//prototype for undoing canvas changes
function HistoryStateEditCanvas () {
    this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);

    this.undo = function () {
        var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
        currentLayer.context.putImageData(this.canvas, 0, 0);

        this.canvas = currentCanvas;
        redoStates.push(this);
    };

    this.redo = function () {
        var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
        currentLayer.context.putImageData(this.canvas, 0, 0);

        this.canvas = currentCanvas;
        undoStates.push(this);
    };

    //add self to undo array
    saveHistoryState(this);
}

//prototype for undoing added colors
function HistoryStateAddColor (colorValue) {
    this.colorValue = colorValue;

    this.undo = function () {
        redoStates.push(this);
        deleteColor(this.colorValue);
    };

    this.redo = function () {
        addColor(this.colorValue);
        undoStates.push(this);
    };

    //add self to undo array
    saveHistoryState(this);
}

//prototype for undoing deleted colors
function HistoryStateDeleteColor (colorValue) {
    this.colorValue = colorValue;
    this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);

    this.undo = function () {
        var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
        currentLayer.context.putImageData(this.canvas, 0, 0);

        addColor(this.colorValue);

        this.canvas = currentCanvas;
        redoStates.push(this);
    };

    this.redo = function () {
        var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
        currentLayer.context.putImageData(this.canvas, 0, 0);

        deleteColor(this.colorValue);

        this.canvas = currentCanvas;
        undoStates.push(this);
    };

    //add self to undo array
    saveHistoryState(this);
}

//prototype for undoing colors edits
function HistoryStateEditColor (newColorValue, oldColorValue) {
    this.newColorValue = newColorValue;
    this.oldColorValue = oldColorValue;
    this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);

    this.undo = function () {
        var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
        currentLayer.context.putImageData(this.canvas, 0, 0);

        //find new color in palette and change it back to old color
        var colors = document.getElementsByClassName('color-button');
        for (var i = 0; i < colors.length; i++) {
            console.log(newColorValue, '==', colors[i].jscolor.toString());
            if (newColorValue == colors[i].jscolor.toString()) {
                colors[i].jscolor.fromString(oldColorValue);
                break;
            }
        }

        this.canvas = currentCanvas;
        redoStates.push(this);
    };

    this.redo = function () {
        var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
        currentLayer.context.putImageData(this.canvas, 0, 0);

        //find old color in palette and change it back to new color
        var colors = document.getElementsByClassName('color-button');
        for (var i = 0; i < colors.length; i++) {
            console.log(oldColorValue, '==', colors[i].jscolor.toString());
            if (oldColorValue == colors[i].jscolor.toString()) {
                colors[i].jscolor.fromString(newColorValue);
                break;
            }
        }

        this.canvas = currentCanvas;
        undoStates.push(this);
    };

    //add self to undo array
    saveHistoryState(this);
}


//rename to add undo state
function saveHistoryState (state) {
    console.log('%csaving history state', undoLogStyle);
    console.log(state);

    //get current canvas data and save to undoStates array
    undoStates.push(state);

    //limit the number of states to settings.numberOfHistoryStates
    if (undoStates.length > settings.numberOfHistoryStates) {
        undoStates = undoStates.splice(-settings.numberOfHistoryStates, settings.numberOfHistoryStates);
    }

    //there is now definitely at least 1 undo state, so the button shouldnt be disabled
    document.getElementById('undo-button').classList.remove('disabled');

    //there should be no redoStates after an undoState is saved
    redoStates = [];

    console.log(undoStates);
    console.log(redoStates);
}

function undo () {
    console.log('%cundo', undoLogStyle);

    //if there are any states saved to undo
    if (undoStates.length > 0) {

        document.getElementById('redo-button').classList.remove('disabled');

        //get state 
        var undoState = undoStates[undoStates.length-1];
        console.log(undoState);

        //restore the state
        undoState.undo();

        //remove from the undo list
        undoStates.splice(undoStates.length-1,1);

        //if theres none left to undo, disable the option
        if (undoStates.length == 0) 
            document.getElementById('undo-button').classList.add('disabled');
    }

    console.log(undoStates);
    console.log(redoStates);
}

function redo () {
    console.log('%credo', undoLogStyle);

    if (redoStates.length > 0) {

        //enable undo button
        document.getElementById('undo-button').classList.remove('disabled');

        //get state 
        var redoState = redoStates[redoStates.length-1];
        console.log(redoState);

        //restore the state
        redoState.redo();

        //remove from redo array
        redoStates.splice(redoStates.length-1,1);

        //if theres none left to redo, disable the option
        if (redoStates.length == 0) 
            document.getElementById('redo-button').classList.add('disabled');
    }
    console.log(undoStates);
    console.log(redoStates);
}