Fixed bug when undoing layer add

Also created nAppLayers to save the number of layers used by the editor (and that the use can't directly with).

js/_clickedColor.js

@@ -8,7 +8,7 @@ function clickedColor (e){
         if (selectedColor) selectedColor.classList.remove('selected');
 
         //set current color
-        for (let i=1; i<layers.length - 2; i++) {
+        for (let i=1; i<layers.length - nAppLayers; i++) {
             layers[i].context.fillStyle = this.style.backgroundColor;
         }
 

js/_colorChanged.js

@@ -87,7 +87,7 @@ function colorChanged(e) {
 
     //if this is the current color, update the drawing color
     if (e.target.colorElement.parentElement.classList.contains('selected')) {
-        for (let i=1; i<layers.length - 2; i++) {
+        for (let i=1; i<layers.length - nAppLayers; i++) {
             layers[i].context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
         }
 

js/_history.js

@@ -124,7 +124,7 @@ function HistoryStateFlattenAll(nFlattened) {
     this.nFlattened = nFlattened;
 
     this.undo = function() {
-        for (let i=0; i<this.nFlattened - 2; i++) {
+        for (let i=0; i<this.nFlattened - nAppLayers; i++) {
             undo();
         }
 
@@ -132,7 +132,7 @@ function HistoryStateFlattenAll(nFlattened) {
     };
 
     this.redo = function() {
-        for (let i=0; i<this.nFlattened - 2; i++) {
+        for (let i=0; i<this.nFlattened - nAppLayers; i++) {
             redo();
         }
 
@@ -292,8 +292,16 @@ function HistoryStateAddLayer(layerData, index) {
     this.index = index;
 
     this.undo = function() {
+        console.log("uo");
+
         redoStates.push(this);
-        layers[this.index + 1].selectLayer();
+        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();

js/_layer.js

@@ -104,7 +104,7 @@ class Layer {
 
     hover() {
         // Hide all the layers but the current one
-        for (let i=1; i<layers.length - 2; i++) {
+        for (let i=1; i<layers.length - nAppLayers; i++) {
             if (layers[i] !== this) {
                 layers[i].canvas.style.opacity = 0.3;
             }
@@ -113,7 +113,7 @@ class Layer {
 
     unhover() {
         // Show all the layers again
-        for (let i=1; i<layers.length - 2; i++) {
+        for (let i=1; i<layers.length - nAppLayers; i++) {
             if (layers[i] !== this) {
                 layers[i].canvas.style.opacity = 1;
             }

js/_newPixel.js

@@ -12,7 +12,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 	}
 	else {
 		let nLayers = layers.length;
-		for (let i=2; i < layers.length - 2; i++) {
+		for (let i=2; i < layers.length - nAppLayers; i++) {
 			let currentEntry = layers[i].menuEntry;
 			let associatedLayer;
 
@@ -31,7 +31,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 		}
 
 		// Removing the old layers from the list
-		for (let i=2; i<nLayers - 2; i++) {
+		for (let i=2; i<nLayers - nAppLayers; i++) {
 			layers.splice(2, 1);
 		}
 
@@ -70,6 +70,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 		layers.push(currentLayer);
 		layers.push(VFXLayer);
 		layers.push(TMPLayer);
+		layers.push(pixelGrid);
 	}
 
 	//remove current palette
@@ -113,6 +114,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 
 	//fill background of canvas with bg color
 	fillCheckerboard();
+	fillPixelGrid();
 
 	//reset undo and redo states
 	undoStates = [];

js/_pixelGrid.js

@@ -1 +1,5 @@
-pixelGridCanvas = document.getElementById("pixel-grid");
+pixelGridCanvas = document.getElementById("pixel-grid");
+
+function fillPixelGrid() {
+    
+}

js/_resizeCanvas.js

@@ -110,7 +110,7 @@ function resizeCanvas(event, size) {
 
     // Regenerate the checkerboard
     fillCheckerboard();
-
+    fillPixelGrid();
     // Put the imageDatas in the right position
     switch (rcPivot)
     {

js/_variables.js

@@ -37,4 +37,9 @@ var TMPCanvas = document.getElementById('tmp-canvas');
 // Pixel grid layer
 var pixelGrid;
 // Pixel grid canvas
-var pixelGridCanvas;
+var pixelGridCanvas;
+
+// Index of the first layer the user can use in the layers array
+var firstUserLayerIndex = 2;
+// Number of layers that are only used by the editor
+var nAppLayers = 3;