From 6be8791dec1957769b7739c5fa292a490f649581 Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Mon, 20 Jul 2020 23:33:17 +0200
Subject: [PATCH] Finished implementing editor modes

---
 js/_createButton.js |  2 +-
 js/_editorMode.js   | 39 +++++++++++++++++++++++++++++++++++++++
 js/_fileMenu.js     | 10 ++++++----
 js/_layer.js        |  3 +++
 js/_loadImage.js    |  4 ++--
 js/_newPixel.js     | 12 ++++++++++--
 js/_onLoad.js       |  2 +-
 js/_variables.js    |  1 +
 8 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/js/_createButton.js b/js/_createButton.js
index 62cf247..866edc4 100644
--- a/js/_createButton.js
+++ b/js/_createButton.js
@@ -2,7 +2,7 @@ on('click', 'create-button', function (){
     var width = getValue('size-width');
     var height = getValue('size-height');
     var mode = getValue("editor-mode");
-    newPixel(width,height,'asdfg');
+    newPixel(width, height, mode);
     document.getElementById('new-pixel-warning').style.display = 'block';
 
     //get selected palette name
diff --git a/js/_editorMode.js b/js/_editorMode.js
index f32a907..43d0cab 100644
--- a/js/_editorMode.js
+++ b/js/_editorMode.js
@@ -9,6 +9,45 @@ let modes = {
 
 let infoBox = document.getElementById('editor-mode-info');
 
+function switchMode(currentMode, mustConfirm = true) {
+    if (currentMode == 'Basic') {
+        // Switch to advanced ez pez lemon squez
+        document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
+		// Show the layer menus
+		layerList.style.display = "inline-block";
+		document.getElementById('layer-button').style.display = 'inline-block';
+		// Move the palette menu
+        document.getElementById('colors-menu').style.right = '200px';
+        
+        pixelEditorMode = 'Advanced';
+    }
+    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?')) {
+                return;
+            }
+        }
+
+        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';
+		// Move the palette menu
+		document.getElementById('colors-menu').style.right = '0px';
+
+		pixelEditorMode = 'Basic';
+    }
+}
+
+on('click', 'switch-mode-button', function (e) {
+    switchMode(pixelEditorMode);
+});
+
 // Makes the menu open
 on('click', 'editor-mode-button', function (e){
     //open or close the preset menu
diff --git a/js/_fileMenu.js b/js/_fileMenu.js
index 752d2fb..f680dcf 100644
--- a/js/_fileMenu.js
+++ b/js/_fileMenu.js
@@ -206,18 +206,20 @@ function getProjectData() {
     // sorting layers by increasing z-index
     let layersCopy = layers.slice();
     layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
-    // store canvas size
+    // save canvas size
     dictionary['canvasWidth'] = currentLayer.canvasSize[0];
     dictionary['canvasHeight'] = currentLayer.canvasSize[1];
-    // store palette
+    // save editor mode
+    dictionary['editorMode'] = pixelEditorMode;
+    // save palette
     for (let i=0; i<currentPalette.length; i++) {
         dictionary["color" + i] = currentPalette[i];
     }
 
-    // Store number of layers
+    // save number of layers
     dictionary["nLayers"] = layersCopy.length;
 
-    // store layers 
+    // save layers 
     for (let i=0; i<layersCopy.length; i++) {
         // Only saving the layers the user has access to (no vfx, tmp or checkerboard layers)
         if (layersCopy[i].menuEntry != null) {
diff --git a/js/_layer.js b/js/_layer.js
index fcbdb46..a01c15e 100644
--- a/js/_layer.js
+++ b/js/_layer.js
@@ -329,11 +329,14 @@ function flatten(onlyVisible) {
         let nToFlatten = 0;
 
         for (let i=0; i<layers.length; i++) {
+            console.log(layers[i].name);
             if (layers[i].menuEntry != null && layers[i].isVisible) {
                 visibleLayers.push(layers[i]);
             }
         }
 
+        console.log("da piallare: " + visibleLayers.length);
+
         // Sorting them by z-index
         visibleLayers.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? -1 : 1);
         // Selecting the last visible layer (the only one that won't get deleted)
diff --git a/js/_loadImage.js b/js/_loadImage.js
index 0dcc409..fccdd81 100644
--- a/js/_loadImage.js
+++ b/js/_loadImage.js
@@ -12,7 +12,7 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
                 reader.onload = function (e) {
                     let dictionary = JSON.parse(e.target.result);
 
-                    newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], [], dictionary);
+                    newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], dictionary['editorMode'], dictionary);
                 }
             }
             else {
@@ -22,7 +22,7 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
                     var img = new Image();
                     img.onload = function() {
                         //create a new pixel with the images dimentions
-                        newPixel(this.width, this.height, []);
+                        newPixel(this.width, this.height, 'Advanced');
 
                         //draw the image onto the canvas
                         currentLayer.context.drawImage(img, 0, 0);
diff --git a/js/_newPixel.js b/js/_newPixel.js
index 60eca6e..85cf243 100644
--- a/js/_newPixel.js
+++ b/js/_newPixel.js
@@ -1,6 +1,8 @@
 let firstPixel = true;
 
-function newPixel (width, height, palette, fileContent = null) {
+function newPixel (width, height, editorMode, fileContent = null) {
+	pixelEditorMode = editorMode;
+
 	currentPalette = [];
 	if (firstPixel) {
 		layerList = document.getElementById("layers-menu");
@@ -121,7 +123,6 @@ function newPixel (width, height, palette, fileContent = null) {
 	firstPixel = false;
 
 	if (fileContent != null) {
-		console.log(fileContent);
 		for (let i=0; i<fileContent['nLayers']; i++) {
 			let layerData = fileContent['layer' + i];
 			let layerImage = fileContent['layer' + i + 'ImageData'];
@@ -158,4 +159,11 @@ function newPixel (width, height, palette, fileContent = null) {
 		// Deleting the default layer
 		deleteLayer(false);
 	}
+
+	if (pixelEditorMode == 'Basic') {
+		switchMode('Advanced', false);
+	}
+	else {
+		switchMode('Basic', false);
+	}
 }
\ No newline at end of file
diff --git a/js/_onLoad.js b/js/_onLoad.js
index 309a95d..01c5590 100644
--- a/js/_onLoad.js
+++ b/js/_onLoad.js
@@ -5,7 +5,7 @@ window.onload = function(){
   //if the user specified dimentions
   if (specifiedDimentions)
     //create a new pixel
-    newPixel(getValue('size-width'),getValue('size-height'),'');
+    newPixel(getValue('size-width'),getValue('size-height'), getValue('editor-mode'));
   else
     //otherwise show the new pixel dialog
     showDialogue('new-pixel', false);
diff --git a/js/_variables.js b/js/_variables.js
index 6e32425..3286b78 100644
--- a/js/_variables.js
+++ b/js/_variables.js
@@ -4,6 +4,7 @@ var dragging = false;
 var lastPos = [0,0];
 var dialogueOpen = false;
 var documentCreated = false;
+var pixelEditorMode;
 
 // Checkerboard management
 // Checkerboard color 1