From 9032bf4fe9909a3843e91ec44eb8a8588a049bcb Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Tue, 23 Jun 2020 18:10:10 +0200
Subject: [PATCH] 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         | 28 ++++++++++++++++++++
 js/_layer.js           | 60 ++++++++++++++++++++++--------------------
 js/_mouseEvents.js     |  3 +--
 views/pixel-editor.hbs | 11 ++++++++
 4 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/js/_history.js b/js/_history.js
index 8158359..ed7115b 100644
--- a/js/_history.js
+++ b/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]);
diff --git a/js/_layer.js b/js/_layer.js
index 2a5bb0b..f2810d7 100644
--- a/js/_layer.js
+++ b/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]);
 }
\ No newline at end of file
diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js
index b169b2a..4942fbd 100644
--- a/js/_mouseEvents.js
+++ b/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) {
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index 6d569bb..0be915a 100644
--- a/views/pixel-editor.hbs
+++ b/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>