mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Implemented lock function

Browse Source 
Now a layer can be locked and unlocked and it's possible to edit a layer only if the layer is not locked.
This commit is contained in:
unsettledgames 2020-06-19 12:57:07 +02:00
parent 750414d63a
commit 066582e309
4 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/_copyPaste.js
View File

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

9
js/_layer.js
View File

@ -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() {

20
js/_mouseEvents.js
View File

@ -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';

4
js/_newPixel.js
View File

@ -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);