pixel-editor/js/History.js

/** BUG: 
 *  - Create a new pixel
 *  - Open a png file
 *  - Draw with the pencil
 *  - Hit CTRL+Z
 *  - RESULT: undo doesn't work, the app can't find the current layer
 * 
 *  - RELATED: when opening an LPE file, the app draws on a layer that is below the one in which the 
 *             file is loaded. This is because the data is loaded on new layers, but the first one
 *             isn't removed and sometimes it could have the same ID of a recently added layer.
 */

/** How the history works
 * - undoStates stores the states that can be undone
 * - redoStates stores the states that can be redone
 * - undo() undoes an action and adds it to the redoStates
 * - redo() redoes an action and adds it to the undoStates
 * - Each HistoryState must implement an undo() and redo() function 
 *      Those functions actually implement the undo and redo mechanism for that action,
 *      so you'll need to save the data you need as attributes in the constructor. For example,
 *      for the HistoryStateAddColour, the added colour is saved so that it can be removed in 
 *      undo() or added back in redo().
 * - Each HistoryState must call saveHistoryState(this) so that it gets added to the stack
 * 
 */
const History = (() => {

    const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
    let undoStates = [];
    let redoStates = [];
    
    Events.on('click', 'undo-button', undo);
    Events.on('click', 'redo-button', redo);

    //rename to add undo state
    function saveHistoryState (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 = [];
    }

    function undo () {
        undoOrRedo('undo');
    }

    function redo () {
        undoOrRedo('redo');
    }

    function undoOrRedo(mode) {
        if (redoStates.length <= 0 && mode == 'redo') return;
        if (undoStates.length <= 0 && mode == 'undo') return;

        // Enable button
        document.getElementById(mode + '-button').classList.remove('disabled');

        if (mode == 'undo') {
            const undoState = undoStates.pop();
            redoStates.push(undoState); 
            undoState.undo();
        }
        else {
            const redoState = redoStates.pop();
            undoStates.push(redoState); 
            redoState.redo();
        }


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

    return {
        redo,
        undo,
        saveHistoryState
    }
})();

class HistoryState {
    constructor() {
        History.saveHistoryState(this);
    }

    ResizeSprite (xRatio, yRatio, algo, oldData) {
        this.xRatio = xRatio;
        this.yRatio = yRatio;
        this.algo = algo;
        this.oldData = oldData;

        this.undo = function() {
            let layerIndex = 0;

            currentAlgo = algo;
            resizeSprite(null, [1 / this.xRatio, 1 / this.yRatio]);

            // Also putting the old data
            for (let i=0; i<layers.length; i++) {
                if (layers[i].menuEntry != null) {
                    layers[i].context.putImageData(this.oldData[layerIndex], 0, 0);
                    layerIndex++;
                    layers[i].updateLayerPreview();
                }
            }
        };

        this.redo = function() {
            currentAlgo = algo;
            resizeSprite(null, [this.xRatio, this.yRatio]);
        };
    }

    ResizeCanvas (newSize, oldSize, imageDatas, trim) {
        this.oldSize = oldSize;
        this.newSize = newSize;
        this.imageDatas = imageDatas;
        this.trim = trim;

        this.undo = function() {
            let dataIndex = 0;
            // Resizing the canvas
            resizeCanvas(null, oldSize, null, false);
            // Putting the image datas
            for (let i=0; i<layers.length; i++) {
                if (layers[i].menuEntry != null) {
                    layers[i].context.putImageData(this.imageDatas[dataIndex], 0, 0);
                    dataIndex++;
                }
            }
        };

        this.redo = function() {
            if (!this.trim) {
                resizeCanvas(null, newSize, null, false);
            }
            else {
                trimCanvas(null, false);
            }
        };
    }

    FlattenVisible(flattened) {
        this.nFlattened = flattened;

        this.undo = function() {
            for (let i=0; i<this.nFlattened; i++) {
                undo();
            }
        };

        this.redo = function() {
            for (let i=0; i<this.nFlattened; i++) {
                redo();
            }
        };
    }

    FlattenTwoVisibles(belowImageData, afterAbove, layerIndex, aboveLayer, belowLayer) {
        this.aboveLayer = aboveLayer;
        this.belowLayer = belowLayer;
        this.belowImageData = belowImageData;

        this.undo = function() {
            canvasView.append(aboveLayer.canvas);
            LayerList.getLayerListEntries().insertBefore(aboveLayer.menuEntry, afterAbove);

            belowLayer.context.clearRect(0, 0, belowLayer.canvasSize[0], belowLayer.canvasSize[1]);
            belowLayer.context.putImageData(this.belowImageData, 0, 0);
            belowLayer.updateLayerPreview();

            layers.splice(layerIndex, 0, aboveLayer);
        };

        this.redo = function() {
            LayerList.mergeLayers(belowLayer.context, aboveLayer.context);

            // Deleting the above layer
            aboveLayer.canvas.remove();
            aboveLayer.menuEntry.remove();
            layers.splice(layers.indexOf(aboveLayer), 1);
        };
    }

    FlattenAll(nFlattened) {
        this.nFlattened = nFlattened;

        this.undo = function() {
            for (let i=0; i<this.nFlattened - nAppLayers; i++) {
                undo();
            }
        };

        this.redo = function() {
            for (let i=0; i<this.nFlattened - nAppLayers; i++) {
                redo();
            }
        };
    }

    MergeLayer(aboveIndex, aboveLayer, belowData, belowLayer) {
        this.aboveIndex = aboveIndex;
        this.belowData = belowData;
        this.aboveLayer = aboveLayer;
        this.belowLayer = belowLayer;

        this.undo = function() {
            LayerList.getLayerListEntries().insertBefore(this.aboveLayer.menuEntry, this.belowLayer.menuEntry);
            canvasView.append(this.aboveLayer.canvas);

            belowLayer.context.clearRect(0, 0, this.belowLayer.canvasSize[0], this.belowLayer.canvasSize[1]);
            belowLayer.context.putImageData(this.belowData, 0, 0);
            belowLayer.updateLayerPreview();

            layers.splice(this.aboveIndex, 0, this.aboveLayer);
        };

        this.redo = function() {
            aboveLayer.selectLayer();
            LayerList.merge(false);
        };
    }

    RenameLayer(oldName, newName, layer) {
        this.edited = layer;
        this.oldName = oldName;
        this.newName = newName;

        this.undo = function() {
            layer.menuEntry.getElementsByTagName("p")[0].innerHTML = oldName;
        };

        this.redo = function() {
            layer.menuEntry.getElementsByTagName("p")[0].innerHTML = newName;
        };
    }

    DuplicateLayer(addedLayer, copiedLayer) {
        this.addedLayer = addedLayer;
        this.copiedLayer = copiedLayer;

        this.undo = function() {
            addedLayer.selectLayer();
            LayerList.deleteLayer(false);
        };

        this.redo = function() {
            copiedLayer.selectLayer();
            LayerList.duplicateLayer(null, false);
        };
    }

    DeleteLayer(layerData, before, index) {
        this.deleted = layerData;
        this.before = before;
        this.index = index;

        this.undo = function() {
            canvasView.append(this.deleted.canvas);
            if (this.before != null) {
                LayerList.getLayerListEntries().insertBefore(this.deleted.menuEntry, this.before);
            }
            else {
                LayerList.getLayerListEntries().prepend(this.deleted.menuEntry);
            }
            layers.splice(this.index, 0, this.deleted);
        };

        this.redo = function() {
            this.deleted.selectLayer();
            LayerList.deleteLayer(false);
        };
    }

    MoveTwoLayers(layer, oldIndex, newIndex) {
        this.layer = layer;
        this.oldIndex = oldIndex;
        this.newIndex = newIndex;

        this.undo = function() {
            layer.canvas.style.zIndex = oldIndex;
        };

        this.redo = function() {
            layer.canvas.style.zIndex = newIndex;
        };
    }

    MoveLayer(afterToDrop, toDrop, staticc, nMoved) {
        this.beforeToDrop = afterToDrop;
        this.toDrop = toDrop;

        this.undo = function() {
            toDrop.menuEntry.remove();

            if (afterToDrop != null) {
                LayerList.getLayerListEntries().insertBefore(toDrop.menuEntry, afterToDrop)
            }
            else {
                LayerList.getLayerListEntries().append(toDrop.menuEntry);
            }

            for (let i=0; i<nMoved; i++) {
                undo();
            }
        };

        this.redo = function() {
            moveLayers(toDrop.menuEntry.id, staticc.menuEntry.id, true);
        };
    }

    AddLayer(layerData, index) {
        this.added = layerData;
        this.index = index;

        this.undo = function() {
            if (layers.length - nAppLayers > this.index + 1) {
                layers[this.index + 1].selectLayer();
            }
            else {
                layers[this.index - 1].selectLayer();
            }

            this.added.canvas.remove();
            this.added.menuEntry.remove();

            layers.splice(index, 1);
        };

        this.redo = function() {
            canvasView.append(this.added.canvas);
            LayerList.getLayerListEntries().prepend(this.added.menuEntry);
            layers.splice(this.index, 0, this.added);
        };
    }

    //prototype for undoing canvas changes
    EditCanvas() {
        this.canvasState = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
        this.layerID = currentLayer.id;

        this.undo = function () {
            var stateLayer = LayerList.getLayerByID(this.layerID);
            var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
            stateLayer.context.putImageData(this.canvasState, 0, 0);

            this.canvasState = currentCanvas;

            stateLayer.updateLayerPreview();
        };

        this.redo = function () {
            var stateLayer = LayerList.getLayerByID(this.layerID);
            var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);

            stateLayer.context.putImageData(this.canvasState, 0, 0);

            this.canvasState = currentCanvas;

            stateLayer.updateLayerPreview();
        };
    }

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

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

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

    //prototype for undoing deleted colors
    DeleteColor(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);

            ColorModule.addColor(this.colorValue);

            this.canvas = currentCanvas;
        };

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

            ColorModule.deleteColor(this.colorValue);

            this.canvas = currentCanvas;
        };
    }

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

        this.undo = function () {
            let 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
            let colors = document.getElementsByClassName('color-button');
            for (let 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;
        };

        this.redo = function () {
            let 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
            let colors = document.getElementsByClassName('color-button');
            for (let 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;
        };
    }
}