Added layer menu in the top bar

Since I've procrastinated a lot and I've finished the things to implement before it, next is history management.

js/_history.js

@@ -3,6 +3,34 @@ var redoStates = [];
 
 const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
 
+function HistoryStateMergeLayer() {
+
+}
+
+function HistoryStateFlattenVisible() {
+
+}
+
+function HistoryStateFlattenAll() {
+
+}
+
+function HistoryStateRenameLayer() {
+
+}
+
+function HistoryStateDeleteLayer() {
+
+}
+
+function HistoryStateMoveLayer() {
+
+}
+
+function HistoryStateAddLayer() {
+
+}
+
 //prototype for undoing canvas changes
 function HistoryStateEditCanvas () {
     this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);

js/_layer.js

@@ -56,35 +56,7 @@ let layerOptions = document.getElementById("layer-properties-menu");
 
 let isRenamingLayer = false;
 
-on('click',"add-layer-button", function(){
-    // Creating a new canvas
-    let newCanvas = document.createElement("canvas");
-    // Setting up the new canvas
-    canvasView.append(newCanvas);
-    maxZIndex++;
-    newCanvas.style.zIndex = maxZIndex;
-    newCanvas.classList.add("drawingCanvas");
-
-    console.log("Tela creata: " + newCanvas);
-
-    // Clone the default layer
-    let toAppend = layerListEntry.cloneNode(true);
-    // Setting the default name for the layer
-    toAppend.getElementsByTagName('p')[0].innerHTML = "Layer " + layerCount;
-    // Removing the selected class
-    toAppend.classList.remove("selected-layer");
-    // Adding the layer to the list
-    layerCount++;
-
-    // Creating a layer object
-    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);
-    
-    // Insert it before the Add layer button
-    layerList.insertBefore(toAppend, layerList.childNodes[0]);
-}, false);
+on('click',"add-layer-button", addLayer, false);
 
 /** Handler class for a single canvas (a single layer)
  *
@@ -564,4 +536,34 @@ function getLayerByID(id) {
     }
 
     return null;
+}
+
+function addLayer() {
+    // Creating a new canvas
+    let newCanvas = document.createElement("canvas");
+    // Setting up the new canvas
+    canvasView.append(newCanvas);
+    maxZIndex++;
+    newCanvas.style.zIndex = maxZIndex;
+    newCanvas.classList.add("drawingCanvas");
+
+    console.log("Tela creata: " + newCanvas);
+
+    // Clone the default layer
+    let toAppend = layerListEntry.cloneNode(true);
+    // Setting the default name for the layer
+    toAppend.getElementsByTagName('p')[0].innerHTML = "Layer " + layerCount;
+    // Removing the selected class
+    toAppend.classList.remove("selected-layer");
+    // Adding the layer to the list
+    layerCount++;
+
+    // Creating a layer object
+    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);
+    
+    // Insert it before the Add layer button
+    layerList.insertBefore(toAppend, layerList.childNodes[0]);
 }

js/_mouseEvents.js

@@ -32,8 +32,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 				canDraw = false;
 			}
 		}
-		    //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
-
+		
 		currentTool.updateCursor();
 
 		if (!currentLayer.isLocked && canDraw) {

views/pixel-editor.hbs

@@ -61,6 +61,17 @@
                 <li><button id="redo-button" class="disabled">Redo</button></li>
             </ul>
         </li>
+        <li>
+            <button>Layer</button>
+            <ul>
+                <li><button onclick = "addLayer()">New layer</button></li>
+                <li><button onclick = "renameLayer()">Rename</button></li>
+                <li><button onclick = "deleteLayer()">Delete</button></li>
+                <li><button onclick = "merge()">Merge below</button></li>
+                <li><button onclick = "flatten(false)">Flatten all</button></li>
+                <li><button onclick = "flatten(true)">Flatten visible</button></li>
+                
+            </ul>
         <li>
             <button>Selection</button>
             <ul>