Implemented history state for deleting layers

Also fixed a few bugs in the other states.

js/_history.js

@@ -3,16 +3,16 @@ var redoStates = [];
 
 const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
 
-function HistoryStateMergeLayer() {
-
-}
-
 function HistoryStateFlattenVisible() {
-
+    // undo the merge for the number of layers that have been flattened
 }
 
 function HistoryStateFlattenAll() {
+    // undo the merge for the number of layers that have been flattened
+}
 
+function HistoryStateMergeLayer() {
+    // todo
 }
 
 function HistoryStateRenameLayer(oldName, newName, layer) {
@@ -35,14 +35,28 @@ function HistoryStateRenameLayer(oldName, newName, layer) {
     saveHistoryState(this);
 }
 
-function HistoryStateDeleteLayer(layerData) {
+function HistoryStateDeleteLayer(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.insertBefore(this.deleted.menuEntry, this.before);
+        }
+        else {
+            layerList.prepend(this.deleted.menuEntry);
+        }
+        layers.splice(this.index, 0, this.deleted);
+
         redoStates.push(this);
     };
 
     this.redo = function() {
+        this.deleted.selectLayer();
+        deleteLayer(false);
+
         undoStates.push(this);
     };
 
@@ -66,19 +80,24 @@ function HistoryStateMoveLayer(layer1, layer2) {
     saveHistoryState(this);
 }
 
-function HistoryStateAddLayer(layerData) {
+function HistoryStateAddLayer(layerData, index) {
     this.added = layerData;
+    this.index = index;
 
     this.undo = function() {
         redoStates.push(this);
 
-        this.added.selectLayer();
+        this.added.canvas.remove();
-        deleteLayer();
+        this.added.menuEntry.remove();
-
+        layers.splice(index, 1);
     };
 
     this.redo = function() {
-        addLayer(layerData.id, false);
+        undoStates.push(this);
+
+        canvasView.append(this.added.canvas);
+        layerList.prepend(this.added.menuEntry);
+        layers.splice(this.index, 0, this.added);
     };
 
     saveHistoryState(this);
@@ -90,6 +109,7 @@ function HistoryStateEditCanvas () {
     this.layerID = currentLayer.id;
 
     this.undo = function () {
+        console.log("CHE COSA STA SUCCEDENDOOOOOO STA CAMBIANDO IL MONDOOOOO");
         var stateLayer = getLayerByID(this.layerID);
         var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
         stateLayer.context.putImageData(this.canvasState, 0, 0);
@@ -239,7 +259,7 @@ function undo () {
 
     //if there are any states saved to undo
     if (undoStates.length > 0) {
-
+        console.log("UUUEEEEEEEEEEE");
         document.getElementById('redo-button').classList.remove('disabled');
 
         //get state 

js/_layer.js

@@ -405,11 +405,12 @@ function merge(event) {
     
 }
 
-function deleteLayer() {
+function deleteLayer(saveHistory = true) {
     // Cannot delete all the layers
     if (layers.length != 4) {
         let layerIndex = layers.indexOf(currentLayer);
         let toDelete = layers[layerIndex];
+        let previousSibling = toDelete.menuEntry.previousElementSibling;
         // Adding the ids to the unused ones
         console.log("id cancellato: " + toDelete.id);
         unusedIDs.push(toDelete.id);
@@ -429,6 +430,10 @@ function deleteLayer() {
 
         // Removing the layer from the list
         layers.splice(layerIndex, 1);
+
+        if (saveHistory) {
+            new HistoryStateDeleteLayer(toDelete, previousSibling, layerIndex);
+        }
     }
 
     // Closing the menu
@@ -512,6 +517,7 @@ function getLayerByID(id) {
 }
 
 function addLayer(id, saveHistory = true) {
+    let index = layers.length - 3;
     // Creating a new canvas
     let newCanvas = document.createElement("canvas");
     // Setting up the new canvas
@@ -535,7 +541,7 @@ function addLayer(id, saveHistory = true) {
     let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend);
     newLayer.context.fillStyle = currentLayer.context.fillStyle;
     newLayer.copyData(currentLayer);
-    layers.splice(layers.length - 3, 0, newLayer);
+    layers.splice(index, 0, newLayer);
     
     // Insert it before the Add layer button
     layerList.insertBefore(toAppend, layerList.childNodes[0]);
@@ -546,6 +552,6 @@ function addLayer(id, saveHistory = true) {
     }
     // Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
     if (saveHistory) {
-        new HistoryStateAddLayer(newLayer);
+        new HistoryStateAddLayer(newLayer, index);
     }
 }