diff --git a/js/_copyPaste.js b/js/_copyPaste.js index a3af684..b3b27aa 100644 --- a/js/_copyPaste.js +++ b/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; diff --git a/js/_layer.js b/js/_layer.js index a162647..dad00a6 100644 --- a/js/_layer.js +++ b/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() { diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 3fd2caa..01c8bb0 100644 --- a/js/_mouseEvents.js +++ b/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 (!documentCreated || dialogueOpen) return; + //if no document has been created yet, or this is a dialog open, or the currentLayer is locked + 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 (!documentCreated || dialogueOpen) return; + //if a document hasnt yet been created or the current layer is locked, exit this function + if (!documentCreated || dialogueOpen || currentLayer.isLocked) return; eyedropperPreview.style.display = 'none'; diff --git a/js/_newPixel.js b/js/_newPixel.js index 3f357c1..cc3e411 100644 --- a/js/_newPixel.js +++ b/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);