Fixed bugs in the already implemented history states, added state for moving layers

Since the states were recycling the same functions, a brand new state was saved when redoing, so that undoing was impossible.

js/_history.js

@@ -23,11 +23,23 @@ function HistoryStateDeleteLayer() {
 
 }
 
-function HistoryStateMoveLayer() {
+function HistoryStateMoveLayer(layer1, layer2) {
+    this.layer1 = layer1;
+    this.layer2 = layer2;
 
+    this.undo = function() {
+        swapLayerEntries(layer1, layer2, false);
+        redoStates.push(this);
+    };
+
+    this.redo = function() {
+        swapLayerEntries(layer1, layer2, false);
+        undoStates.push(this);
+    };
+
+    saveHistoryState(this);
 }
 
-//TODO: finisci
 function HistoryStateAddLayer(layerData) {
     this.added = layerData;
 
@@ -40,8 +52,7 @@ function HistoryStateAddLayer(layerData) {
     };
 
     this.redo = function() {
-        undoStates.push(this);
-        addLayer();
+        addLayer(layerData.id, false);
     };
 
     saveHistoryState(this);
@@ -53,7 +64,6 @@ function HistoryStateEditCanvas () {
     this.layerID = currentLayer.id;
 
     this.undo = function () {
-
         var stateLayer = getLayerByID(this.layerID);
         var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
         stateLayer.context.putImageData(this.canvasState, 0, 0);
@@ -65,7 +75,7 @@ function HistoryStateEditCanvas () {
     };
 
     this.redo = function () {
-
+        console.log("YEET");
         var stateLayer = getLayerByID(this.layerID);
         var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
 
@@ -74,7 +84,7 @@ function HistoryStateEditCanvas () {
         this.canvasState = currentCanvas;
         undoStates.push(this);
 
-        currentLayer.updateLayerPreview();
+        stateLayer.updateLayerPreview();
     };
 
     //add self to undo array

js/_layer.js

@@ -127,6 +127,13 @@ class Layer {
         this.context.mozImageSmoothingEnabled = false;
     }
 
+    setID(id) {
+        this.id = id;
+        if (this.menuEntry != null) {
+            this.menuEntry.id = id;
+        }
+    }
+
     layerDragStart(element) {
         layerDragSource = this;
         element.dataTransfer.effectAllowed = 'move';
@@ -434,8 +441,8 @@ function renameLayer(event) {
     isRenamingLayer = true;
 }
 
-// Swap two layer entries in the layer menu
-function swapLayerEntries(id1, id2) {
+// Swaps two layer entries in the layer menu
+function swapLayerEntries(id1, id2, saveHistory = true) {
     let entry1 = document.getElementById(id1);
     let entry2 = document.getElementById(id2);
 
@@ -462,6 +469,10 @@ function swapLayerEntries(id1, id2) {
     } else {
        parent.appendChild(entry1);
     }
+
+    if (saveHistory) { 
+        new HistoryStateMoveLayer(id1, id2);
+    }
 }
 
 // Finds a layer given its name
@@ -490,7 +501,7 @@ function getLayerByID(id) {
     return null;
 }
 
-function addLayer() {
+function addLayer(id, saveHistory = true) {
     // Creating a new canvas
     let newCanvas = document.createElement("canvas");
     // Setting up the new canvas
@@ -518,5 +529,12 @@ function addLayer() {
     
     // Insert it before the Add layer button
     layerList.insertBefore(toAppend, layerList.childNodes[0]);
-    new HistoryStateAddLayer(newLayer);
+
+    if (id != null) {
+        newLayer.setID(id);
+    }
+    // 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);
+    }
 }