Finished implementing history states

I thought it was going to be a lot more annoying

js/_history.js

@@ -3,16 +3,11 @@ var redoStates = [];
 
 const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
 
-function HistoryStateFlattenVisible() {
+function HistoryStateFlattenVisible(flattened) {
-    // undo the merge for the number of layers that have been flattened
+    this.nFlattened = flattened;
-}
-
-function HistoryStateFlattenAll(nFlattened) {
-    this.nFlattened = nFlattened;
 
     this.undo = function() {
-        console.log(nFlattened);
+        for (let i=0; i<this.nFlattened; i++) {
-        for (let i=0; i<nFlattened - 2; i++) {
             undo();
         }
 
@@ -20,7 +15,67 @@ function HistoryStateFlattenAll(nFlattened) {
     };
 
     this.redo = function() {
-        for (let i=0; i<nFlattened - 2; i++) {
+        for (let i=0; i<this.nFlattened; i++) {
+            redo();
+        }
+
+        undoStates.push(this);
+    };
+
+    saveHistoryState(this);
+}
+
+function HistoryStateFlattenTwoVisibles(belowImageData, beforeAbove, layerIndex, aboveLayer, belowLayer) {
+    this.aboveLayer = aboveLayer;
+    this.belowLayer = belowLayer;
+    this.belowImageData = belowImageData;
+
+    this.undo = function() {
+        // SCEMOOOO DEVI METTERCI PURE I PIXELSSSS
+        canvasView.append(aboveLayer.canvas);
+        if (beforeAbove != null) {
+            layerList.insertBefore(aboveLayer.menuEntry, beforeAbove.menuEntry);
+        }
+        else {
+            layerList.prepend(aboveLayer.menuEntry);
+        }
+
+        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);
+
+        redoStates.push(this);
+    };
+
+    this.redo = function() {
+        mergeLayers(belowLayer.context, aboveLayer.context);
+
+        // Deleting the above layer
+        aboveLayer.canvas.remove();
+        aboveLayer.menuEntry.remove();
+        layers.splice(layers.indexOf(aboveLayer), 1);
+
+        undoStates.push(this);
+    };
+
+    saveHistoryState(this);
+}
+
+function HistoryStateFlattenAll(nFlattened) {
+    this.nFlattened = nFlattened;
+
+    this.undo = function() {
+        for (let i=0; i<this.nFlattened - 2; i++) {
+            undo();
+        }
+
+        redoStates.push(this);
+    };
+
+    this.redo = function() {
+        for (let i=0; i<this.nFlattened - 2; i++) {
             redo();
         }
 

js/_layer.js

@@ -341,6 +341,7 @@ function flatten(onlyVisible) {
     else {
         // Getting all the visible layers
         let visibleLayers = [];
+        let nToFlatten = 0;
 
         for (let i=0; i<layers.length; i++) {
             if (layers[i].menuEntry != null && layers[i].isVisible) {
@@ -355,6 +356,14 @@ function flatten(onlyVisible) {
 
         // Merging all the layer but the last one
         for (let i=0; i<visibleLayers.length - 1; i++) {
+            nToFlatten++;
+            new HistoryStateFlattenTwoVisibles(
+                visibleLayers[i + 1].context.getImageData(0, 0, visibleLayers[i].canvasSize[0], visibleLayers[i].canvasSize[1]),
+                visibleLayers[i].menuEntry.previousElementSibling,
+                layers.indexOf(visibleLayers[i]),
+                visibleLayers[i], visibleLayers[i + 1]
+            );
+
             mergeLayers(visibleLayers[i + 1].context, visibleLayers[i].context);
 
             // Deleting the above layer
@@ -363,6 +372,7 @@ function flatten(onlyVisible) {
             layers.splice(layers.indexOf(visibleLayers[i]), 1);
         }
 
+        new HistoryStateFlattenVisible(nToFlatten);
         // Updating the layer preview
         currentLayer.updateLayerPreview();
     }