fixed a few bugs on layers before first document is created

js/_editorMode.js

@@ -10,6 +10,8 @@ let modes = {
 let infoBox = document.getElementById('editor-mode-info');
 
 function switchMode(currentMode, mustConfirm = true) {
+
+	//switch to advanced mode
     if (currentMode == 'Basic') {
         // Switch to advanced ez pez lemon squez
         document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
@@ -18,22 +20,33 @@ function switchMode(currentMode, mustConfirm = true) {
 		document.getElementById('layer-button').style.display = 'inline-block';
 		// Move the palette menu
         document.getElementById('colors-menu').style.right = '200px';
-        
+
         pixelEditorMode = 'Advanced';
     }
+
+    //switch to basic mode
     else {
-        // Switch to basic
+
-        if (mustConfirm) {
+
-            if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
+		//if there is a current layer (a document is active)
-                return;
+        if (currentLayer) {
-            }
+
+        	//confirm with user before flattening image
+        	if (mustConfirm ) {
+	            if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
+	                return;
+	            }
+	        }
+
+			// Selecting the current layer
+			currentLayer.selectLayer();
+			// Flatten the layers
+			flatten(true);
         }
 
+        //change menu text
         document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
-		// Selecting the current layer
+
-		currentLayer.selectLayer();
-		// Flatten the layers
-		flatten(true);
 		// Hide the layer menus
 		layerList.style.display = 'none';
 		document.getElementById('layer-button').style.display = 'none';

js/_layer.js

@@ -1,13 +1,13 @@
 /** TODO LIST FOR LAYERS
-    
+
     GENERAL REQUIREMENTS:
-    - Saving the state of an artwork to a .lospec file so that people can work on it later keeping 
+    - Saving the state of an artwork to a .lospec file so that people can work on it later keeping
       the layers they created? That'd be cool, even for the app users, that could just double click on a lospec
       file for it to be opened right in the pixel editor
 
     OPTIONAL:
 
-    1 - Fix issues 
+    1 - Fix issues
 */
 
 let layerList;
@@ -52,7 +52,7 @@ class Layer {
             currentID++;
         }
 
-        this.id = "layer" + id;     
+        this.id = "layer" + id;
 
         if (menuEntry != null) {
             this.name = menuEntry.getElementsByTagName("p")[0].innerHTML;
@@ -138,7 +138,7 @@ class Layer {
         if (layerDragSource != this) {
             let toDropID = element.dataTransfer.getData('text/html');
             let thisID = this.id;
-            
+
             moveLayers(toDropID, thisID);
         }
 
@@ -150,7 +150,7 @@ class Layer {
 
     layerDragEnd(element) {
         this.classList.remove('layerdragover');
-    }    
+    }
 
     // Resizes canvas
     resize() {
@@ -303,9 +303,9 @@ class Layer {
 
         // La appiccico sulla preview
         destination.getContext('2d').clearRect(0, 0, destination.width, destination.height);
-        destination.getContext('2d').drawImage(this.canvas, 
+        destination.getContext('2d').drawImage(this.canvas,
             // This is necessary to center the preview in the canvas
-            (destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2, 
+            (destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
             previewWidth, previewHeight);
     }
 }
@@ -373,14 +373,14 @@ function merge(saveHistory = true) {
     let toMergeIndex = layers.indexOf(toMerge);
     // Getting layer below
     let layerBelow = getLayerByID(currentLayer.menuEntry.nextElementSibling.id);
-    
+
     // If I have something to merge with
     if (layerBelow != null) {
         // Selecting that layer
         layerBelow.selectLayer();
 
         if (saveHistory) {
-            new HistoryStateMergeLayer(toMergeIndex, toMerge, 
+            new HistoryStateMergeLayer(toMergeIndex, toMerge,
                 layerBelow.context.getImageData(0, 0, layerBelow.canvasSize[0], layerBelow.canvasSize[1]),
                 layerBelow);
         }
@@ -395,7 +395,7 @@ function merge(saveHistory = true) {
         // Updating the layer preview
         currentLayer.updateLayerPreview();
     }
-    
+
 }
 
 function deleteLayer(saveHistory = true) {
@@ -414,7 +414,7 @@ function deleteLayer(saveHistory = true) {
         }
         // or the previous one if the next one doesn't exist
         else {
-            layers[layerIndex - 1].selectLayer(); 
+            layers[layerIndex - 1].selectLayer();
         }
 
         // Deleting canvas and entry
@@ -486,7 +486,7 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
         }
 
         toDrop.canvas.style.zIndex = tmp;
-        
+
         if (saveHistory) {
             new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved);
         }
@@ -560,6 +560,8 @@ function addLayer(id, saveHistory = true) {
 
     console.log("Tela creata: " + newCanvas);
 
+	if (!layerListEntry) return console.warn('skipping adding layer because no document');
+
     // Clone the default layer
     let toAppend = layerListEntry.cloneNode(true);
     // Setting the default name for the layer
@@ -574,7 +576,7 @@ function addLayer(id, saveHistory = true) {
     newLayer.context.fillStyle = currentLayer.context.fillStyle;
     newLayer.copyData(currentLayer);
     layers.splice(index, 0, newLayer);
-    
+
     // Insert it before the Add layer button
     layerList.insertBefore(toAppend, layerList.childNodes[0]);
 
@@ -587,4 +589,6 @@ function addLayer(id, saveHistory = true) {
     }
 
     return newLayer;
-}
+}
+
+layerList = document.getElementById("layers-menu");

js/_newPixel.js

@@ -5,7 +5,6 @@ function newPixel (width, height, editorMode, fileContent = null) {
 
 	currentPalette = [];
 	if (firstPixel) {
-		layerList = document.getElementById("layers-menu");
 		layerListEntry = layerList.firstElementChild;
 
 		// Setting up the current layer
@@ -58,7 +57,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 	canvasSize = currentLayer.canvasSize;
 
 	if (firstPixel) {
-		// Cloning the entry so that when I change something on the first layer, those changes aren't 
+		// Cloning the entry so that when I change something on the first layer, those changes aren't
 	    // propagated to the other ones
 	    layerListEntry = layerListEntry.cloneNode(true);
 		// Adding the first layer and the checkerboard to the list of layers
@@ -142,7 +141,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 					if (i == (fileContent['nLayers'] - 1)) {
 						createPaletteFromLayers();
 					}
-				};				
+				};
 
 				img.src = layerImage;