Implemented lock function

Now a layer can be locked and unlocked and it's possible to edit a layer only if the layer is not locked.

js/_copyPaste.js

@@ -20,6 +20,10 @@ function copySelection() {
 }
 
 function pasteSelection() {
+	// Can't paste if the layer is locked
+	if (currentLayer.isLocked) {
+		return;
+	}
 	endSelection();
 
 	isPasting = true;

js/_layer.js

@@ -103,6 +103,7 @@ class Layer {
         this.menuEntry = menuEntry;
 
         if (menuEntry != null) {
+            console.log("Aggiungo eventi");
             menuEntry.onclick = () => this.select();
             menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
             menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
@@ -164,9 +165,11 @@ class Layer {
 
     toggleLock() {
         if (this.isLocked) {
+            console.log("unlocked");
             this.unlock();
         }
         else {
+            console.log("locked");
             this.lock();
         }
     }
@@ -189,10 +192,16 @@ class Layer {
 
     lock() {
         this.isLocked = true;
+
+        this.menuEntry.getElementsByClassName("default-icon")[0].style.display = "none";
+        this.menuEntry.getElementsByClassName("edited-icon")[0].style.display = "inline-block";
     }
 
     unlock() {
         this.isLocked = false;
+
+        this.menuEntry.getElementsByClassName("default-icon")[0].style.display = "inline-block";
+        this.menuEntry.getElementsByClassName("edited-icon")[0].style.display = "none";
     }
 
     show() {

js/_mouseEvents.js

@@ -8,8 +8,8 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	currentMouseEvent = mouseEvent;
 	canDraw = true;
 
-	//if no document has been created yet, or this is a dialog open
+	//if no document has been created yet, or this is a dialog open, or the currentLayer is locked
-	if (!documentCreated || dialogueOpen) return;
+	if (!documentCreated || dialogueOpen || currentLayer.isLocked) return;
 	//prevent right mouse clicks and such, which will open unwanted menus
 	//mouseEvent.preventDefault();
 
@@ -36,7 +36,9 @@ window.addEventListener("mousedown", function (mouseEvent) {
 
 		currentTool.updateCursor();
 
-		if (canDraw) {
+		console.log(currentLayer.isLocked);
+
+		if (!currentLayer.isLocked && canDraw) {
 			draw(mouseEvent);
 		}
 	}
@@ -69,10 +71,11 @@ window.addEventListener("mouseup", function (mouseEvent) {
 
 	closeMenu();
 
-	if (!documentCreated || dialogueOpen) return;
+	if (!documentCreated || dialogueOpen || currentLayer.isLocked) return;
 
 	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
 		var cursorLocation = getCursorPosition(mouseEvent);
+		// TODO: adjust so that if the picked colour is transparent, the underlying layer is checked
 		var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
 		var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
 
@@ -91,6 +94,8 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	        if (selectedColor) selectedColor.classList.remove("selected");
 
 	      	//set current color
+
+	      	// TODO: set it for all the layers
 	      	context.fillStyle = '#'+newColor;
 
 	      	//make color selected
@@ -121,7 +126,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
         }
     }
     else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
-        console.log('filling');
+        //console.log('filling');
         //if you clicked on anything but the canvas, do nothing
         if (!mouseEvent.target == currentLayer.canvas) return;
 
@@ -165,6 +170,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 
 }, false);
 
+// TODO: Make it snap to the pixel grid
 function setPreviewPosition(preview, cursor, size){
     preview.style.left = (
         currentLayer.canvas.offsetLeft
@@ -190,8 +196,8 @@ function draw (mouseEvent) {
 
 	var cursorLocation = lastMousePos;
 
-	//if a document hasnt yet been created, exit this function
+	//if a document hasnt yet been created or the current layer is locked, exit this function
-	if (!documentCreated || dialogueOpen) return;
+	if (!documentCreated || dialogueOpen || currentLayer.isLocked) return;
 
 
 	eyedropperPreview.style.display = 'none';

js/_newPixel.js

@@ -6,6 +6,10 @@ function newPixel (width, height, palette) {
     // Setting up the current layer
     currentLayer = new Layer(width, height, canvas, layerListEntry);
 
+    // Cloning the entry so that when I change something on the first layer, those changes aren't 
+    // propagated to the other ones
+    layerListEntry = layerListEntry.cloneNode(true);
+
     // Adding the checkerboard behind it
     checkerBoard = new Layer(width, height, checkerBoardCanvas);