From 927be7c310dcb85bc835b1d60c5160ff0a63fe3e Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Tue, 23 Jun 2020 23:10:56 +0200
Subject: [PATCH] Implemented save management

HAHA I was joking, I still had to make it save stuff. Ok, now I can only implement the history. It will take ages.
---
 js/_fileMenu.js           | 35 ++++++++++++++++++++++---
 js/_layer.js              | 54 +++------------------------------------
 js/_newPixel.js           |  1 -
 js/_pixelEditorUtility.js | 29 +++++++++++++++++++++
 4 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/js/_fileMenu.js b/js/_fileMenu.js
index 7f884b4..3183ff4 100644
--- a/js/_fileMenu.js
+++ b/js/_fileMenu.js
@@ -35,8 +35,6 @@ for (var i = 1; i < mainMenuItems.length; i++) {
                     showDialogue('new-pixel');
                     break;
                 case 'Open':
-
-
                     //if a document exists
                     if (documentCreated) {
                         //check if the user wants to overwrite
@@ -65,11 +63,42 @@ for (var i = 1; i < mainMenuItems.length; i++) {
 
                         //set download link
                         var linkHolder = document.getElementById('save-image-link-holder');
-                        linkHolder.href = canvas.toDataURL();
+                        // Creating a tmp canvas to flatten everything
+                        var exportCanvas = document.createElement("canvas");
+                        var emptyCanvas = document.createElement("canvas");
+                        var layersCopy = layers.slice();;
+
+                        exportCanvas.width = canvasSize[0];
+                        exportCanvas.height = canvasSize[1];
+
+                        emptyCanvas.width = canvasSize[0];
+                        emptyCanvas.height = canvasSize[1];
+
+                        // Sorting the layers by z index
+                        layersCopy.sort((a, b) => (a.canvas.zIndex > b.canvas.zIndex) ? 1 : -1);
+
+                        // Merging every layer on the export canvas
+                        for (let i=0; i<layersCopy.length; i++) {
+                            if (layersCopy[i].menuEntry != null && layersCopy[i].isVisible) {
+                                mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context);
+                            }
+                            // I'm not going to find out why the layer ordering screws up if you don't copy
+                            // a blank canvas when layers[i] is not set as visible, but if you have time to
+                            // spend, feel free to investigate (comment the else, create 3 layers: hide the 
+                            // middle one and export, the other 2 will be swapped in their order)
+                            else {
+                                mergeLayers(exportCanvas.getContext('2d'), emptyCanvas.getContext('2d'));
+                            }
+                        }
+
+                        linkHolder.href = exportCanvas.toDataURL();
                         linkHolder.download = fileName;
 
                         linkHolder.click();
 
+                        emptyCanvas.remove();
+                        exportCanvas.remove();
+
                         //track google event
                         ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
                     }
diff --git a/js/_layer.js b/js/_layer.js
index f2810d7..4c95169 100644
--- a/js/_layer.js
+++ b/js/_layer.js
@@ -344,37 +344,13 @@ function flatten(onlyVisible) {
         }
 
         // Sorting them by z-index
-        visibleLayers.sort((a, b) => (a.canvas.zIndex > b.canvas.zIndex) ? 1 : -1);
+        visibleLayers.sort((a, b) => (a.canvas.zIndex > b.canvas.zIndex) ? -1 : 1);
         // Selecting the last visible layer (the only one that won't get deleted)
         visibleLayers[visibleLayers.length - 1].selectLayer();
 
         // Merging all the layer but the last one
         for (let i=0; i<visibleLayers.length - 1; i++) {
-            // Copying the above content on the layerBelow
-            let belowImageData = visibleLayers[i].context.getImageData(0, 0, canvas.width, canvas.height);
-            let toMergeImageData = visibleLayers[i + 1].context.getImageData(0, 0, canvas.width, canvas.height);
-
-            for (let i=0; i<belowImageData.data.length; i+=4) {
-                let currentMovePixel = [
-                    toMergeImageData.data[i], toMergeImageData.data[i+1], 
-                    toMergeImageData.data[i+2], toMergeImageData.data[i+3]
-                ];
-
-                let currentUnderlyingPixel = [
-                    belowImageData.data[i], belowImageData.data[i+1], 
-                    belowImageData.data[i+2], belowImageData.data[i+3]
-                ];
-
-                if (isPixelEmpty(currentMovePixel)) {
-                    if (!isPixelEmpty(belowImageData)) {
-                        toMergeImageData.data[i] = currentUnderlyingPixel[0];
-                        toMergeImageData.data[i+1] = currentUnderlyingPixel[1];
-                        toMergeImageData.data[i+2] = currentUnderlyingPixel[2];
-                        toMergeImageData.data[i+3] = currentUnderlyingPixel[3];
-                    }
-                }
-            }
-            visibleLayers[i + 1].context.putImageData(toMergeImageData, 0, 0);
+            mergeLayers(visibleLayers[i + 1].context, visibleLayers[i].context);
 
             // Deleting the above layer
             visibleLayers[i].canvas.remove();
@@ -402,31 +378,7 @@ function merge(event) {
         // Selecting that layer
         layerBelow.selectLayer();
 
-        // Copying the above content on the layerBelow
-        let belowImageData = currentLayer.context.getImageData(0, 0, canvas.width, canvas.height);
-        let toMergeImageData = toMerge.context.getImageData(0, 0, canvas.width, canvas.height);
-
-        for (let i=0; i<belowImageData.data.length; i+=4) {
-            let currentMovePixel = [
-                toMergeImageData.data[i], toMergeImageData.data[i+1], 
-                toMergeImageData.data[i+2], toMergeImageData.data[i+3]
-            ];
-
-            let currentUnderlyingPixel = [
-                belowImageData.data[i], belowImageData.data[i+1], 
-                belowImageData.data[i+2], belowImageData.data[i+3]
-            ];
-
-            if (isPixelEmpty(currentMovePixel)) {
-                if (!isPixelEmpty(belowImageData)) {
-                    toMergeImageData.data[i] = currentUnderlyingPixel[0];
-                    toMergeImageData.data[i+1] = currentUnderlyingPixel[1];
-                    toMergeImageData.data[i+2] = currentUnderlyingPixel[2];
-                    toMergeImageData.data[i+3] = currentUnderlyingPixel[3];
-                }
-            }
-        }
-        currentLayer.context.putImageData(toMergeImageData, 0, 0);
+        mergeLayers(currentLayer.context, toMerge.context);
 
         // Deleting the above layer
         toMerge.canvas.remove();
diff --git a/js/_newPixel.js b/js/_newPixel.js
index e6f011b..1b4591a 100644
--- a/js/_newPixel.js
+++ b/js/_newPixel.js
@@ -37,7 +37,6 @@ function newPixel (width, height, palette) {
 		// Setting up the current layer
 	    layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
 	    currentLayer = layers[1];
-	    layerCount = 1;
 
 	    canvas = currentLayer.canvas;
 	    context = currentLayer.context;
diff --git a/js/_pixelEditorUtility.js b/js/_pixelEditorUtility.js
index 928b85b..b87424a 100644
--- a/js/_pixelEditorUtility.js
+++ b/js/_pixelEditorUtility.js
@@ -1,3 +1,32 @@
+function mergeLayers(belowLayer, topLayer) {
+	// Copying the above content on the layerBelow
+    let belowImageData = belowLayer.getImageData(0, 0, canvas.width, canvas.height);
+    let toMergeImageData = topLayer.getImageData(0, 0, canvas.width, canvas.height);
+
+    for (let i=0; i<belowImageData.data.length; i+=4) {
+        let currentMovePixel = [
+            toMergeImageData.data[i], toMergeImageData.data[i+1], 
+            toMergeImageData.data[i+2], toMergeImageData.data[i+3]
+        ];
+
+        let currentUnderlyingPixel = [
+            belowImageData.data[i], belowImageData.data[i+1], 
+            belowImageData.data[i+2], belowImageData.data[i+3]
+        ];
+
+        if (isPixelEmpty(currentMovePixel)) {
+            if (!isPixelEmpty(belowImageData)) {
+                toMergeImageData.data[i] = currentUnderlyingPixel[0];
+                toMergeImageData.data[i+1] = currentUnderlyingPixel[1];
+                toMergeImageData.data[i+2] = currentUnderlyingPixel[2];
+                toMergeImageData.data[i+3] = currentUnderlyingPixel[3];
+            }
+        }
+    }
+
+    belowLayer.putImageData(toMergeImageData, 0, 0);
+}
+
 function simulateInput(keyCode, ctrl, alt, shift) {
 	let keyboardEvent = document.createEvent("KeyboardEvent");
 	let initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";