Added canvas preview to layer menu

Decided to apply the same width / height ratio of the canvas to the preview.

css/pixel-editor.scss

@@ -130,9 +130,9 @@ body {
 
   canvas {
     display:inline-block;
-    height:100%;
+    height:50px;
     width:50px;
-    background-color:red;
+    background-color:lightgrey;
     left:4px;
   }
 

js/_history.js

@@ -13,6 +13,8 @@ function HistoryStateEditCanvas () {
 
         this.canvas = currentCanvas;
         redoStates.push(this);
+
+        currentLayer.updateLayerPreview();
     };
 
     this.redo = function () {
@@ -21,6 +23,8 @@ function HistoryStateEditCanvas () {
 
         this.canvas = currentCanvas;
         undoStates.push(this);
+
+        currentLayer.updateLayerPreview();
     };
 
     //add self to undo array

js/_layer.js

@@ -34,6 +34,10 @@
     2 - Add a Replace feature so that people can replace a colour without editing the one in the palette
         (right click->replace colour in layers? in that case we'd have to implement multiple layers selection)
 
+    KNOWN BUGS:
+
+    1 - Must delete existing layers when creating a new pixel
+
     THINGS TO TEST:
 
     1 - Undo / redo
@@ -221,6 +225,32 @@ class Layer {
         this.menuEntry.getElementsByClassName("default-icon")[1].style.display = "none";
         this.menuEntry.getElementsByClassName("edited-icon")[1].style.display = "inline-block";
     }
+
+    updateLayerPreview() {
+        // Getting the canvas
+        let destination = this.menuEntry.getElementsByTagName("canvas")[0];
+        let widthRatio = this.canvasSize[0] / this.canvasSize[1];
+        let heightRatio = this.canvasSize[1] / this.canvasSize[0];
+
+        // Computing width and height for the preview image
+        let previewWidth = destination.width;
+        let previewHeight = destination.height;
+
+        // If the sprite is rectangular, I apply the ratio to the preview as well
+        if (widthRatio < 1) {
+            previewWidth = destination.width * widthRatio;
+        }
+        else if (widthRatio > 1) {
+            previewHeight = destination.height * heightRatio;
+        }
+
+        // La appiccico sulla preview
+        destination.getContext('2d').clearRect(0, 0, destination.width, destination.height);
+        destination.getContext('2d').drawImage(this.canvas, 
+            // This is necessary to center the preview in the canvas
+            (destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2, 
+            previewWidth, previewHeight);
+    }
 }
 
 // Finds a layer given its name

js/_mouseEvents.js

@@ -107,7 +107,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	    }
 	}
 	else if (currentTool.name == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
-	  console.log('filling')
+	  	//console.log('filling')
 
 		//get cursor postion
 		var cursorLocation = getCursorPosition(mouseEvent);
@@ -118,6 +118,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 
     	//fill starting at the location
 		fill(cursorLocation);
+		currentLayer.updateLayerPreview();
 	}
 	else if (currentTool.name == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
 		let mode;
@@ -125,21 +126,6 @@ window.addEventListener("mouseup", function (mouseEvent) {
 			mode = "in";
         }
     }
-    else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
-        //console.log('filling');
-        //if you clicked on anything but the canvas, do nothing
-        if (!mouseEvent.target == currentLayer.canvas) return;
-
-        //get cursor postion
-        var cursorLocation = getCursorPosition(mouseEvent);
-
-        //offset to match cursor point
-        cursorLocation[0] += 2;
-        cursorLocation[1] += 12;
-
-        //fill starting at the location
-        fill(cursorLocation);
-    }
     else if (currentTool == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
         let mode;
         if (mouseEvent.which == 1){
@@ -160,6 +146,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	}
 	else if (currentTool.name == 'rectangle') {
 		endRectDrawing(mouseEvent);
+		currentLayer.updateLayerPreview();
 	}
 
 	dragging = false;
@@ -228,6 +215,8 @@ function draw (mouseEvent) {
 		//for the darkest 50% of colors, change the brush preview to dark mode
 		if (colorLightness>127) brushPreview.classList.remove('dark');
 		else brushPreview.classList.add('dark');
+
+		currentLayer.updateLayerPreview();
 	}
 	// Decided to write a different implementation in case of differences between the brush and the eraser tool
 	else if (currentTool.name == 'eraser') {
@@ -249,6 +238,8 @@ function draw (mouseEvent) {
                 lastPos = cursorLocation;
             }
         }
+
+        currentLayer.updateLayerPreview();
 	}
 	else if (currentTool.name == 'rectangle')
 	{

js/_move.js

@@ -84,6 +84,7 @@ function endSelection() {
     isPasting = false;
     isCutting = false;
     lastMovePos = undefined;
+    currentLayer.updateLayerPreview();
 
     new HistoryStateEditCanvas();
 }