From 7ec24fc046c66e36cc9031a11d452b4e81bc3abf Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Wed, 4 Mar 2020 19:46:19 +0100
Subject: [PATCH] Added tmp layer

The temporary layer (tmp layer) will store selections while the user decides where to put them, so that content below it doesn't get overridden.
---
 css/pixel-editor.scss  | 5 +++++
 js/_layer.js           | 7 +++++++
 js/_newPixel.js        | 3 +++
 js/_variables.js       | 7 ++++++-
 views/pixel-editor.hbs | 1 +
 5 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index f22330f..afdccca 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -63,6 +63,11 @@ svg {
   background:transparent;
 }
 
+#tmp-canvas {
+  z-index:1;
+  background:transparent;
+}
+
 #vfx-canvas {
   z-index:-5000;
   background:transparent;
diff --git a/js/_layer.js b/js/_layer.js
index f975a22..7243be9 100644
--- a/js/_layer.js
+++ b/js/_layer.js
@@ -1,3 +1,10 @@
+/** TODO LIST FOR LAYERS
+    - move the tmp layer so that it's always right below the active layer
+    - when the move tool is selected (to move a selection), the tmp layer must be put right above the 
+        active layer to show a preview
+*/
+
+
 /** Handler class for a single canvas (a single layer)
  *
  * @param width Canvas width
diff --git a/js/_newPixel.js b/js/_newPixel.js
index 6bffd8a..0d47292 100644
--- a/js/_newPixel.js
+++ b/js/_newPixel.js
@@ -12,6 +12,9 @@ function newPixel (width, height, palette) {
     VFXLayer = new Layer(width, height, VFXCanvas);
     VFXLayer.initialize();
 
+    TMPLayer = new Layer(width, height, TMPCanvas);
+    TMPLayer.initialize();
+
 	canvasSize = currentLayer.canvasSize;
 
 	// Adding the first layer and the checkerboard to the list of layers
diff --git a/js/_variables.js b/js/_variables.js
index b822756..dc13b49 100644
--- a/js/_variables.js
+++ b/js/_variables.js
@@ -41,4 +41,9 @@ var currentLayer;
 // VFX layer used to draw previews of the selection and things like that
 var VFXLayer;
 // VFX canvas
-var VFXCanvas = document.getElementById("vfx-canvas");
\ No newline at end of file
+var VFXCanvas = document.getElementById("vfx-canvas");
+
+// TMP layer
+var TMPLayer;
+// TMP canvas
+var TMPCanvas = document.getElementById("tmp-canvas");
\ No newline at end of file
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index 386e8a3..c6bbbe2 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -104,6 +104,7 @@
 
     <div id="canvas-view">
         <canvas id="vfx-canvas" class = "drawingCanvas"></canvas>
+        <canvas id = "tmp-canvas" class = "drawingCanvas"></canvas>
         <canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
         <canvas id="checkerboard" class = "drawingCanvas"></canvas>
     </div>