mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Removed layerListEntry from global variables

This commit is contained in:
unsettledgames 2021-07-23 13:08:04 +02:00
parent 6e4ab3990d
commit d3781979b4
4 changed files with 41 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/ColorModule.js
View File

@ -96,7 +96,6 @@ const ColorModule = (() => {
* @param {*} e The event that triggered the callback
*/
function clickedColor (e){
console.log("here bitch");
//left clicked color
if (e.which == 1) {
// remove current color selection

52
js/Layer.js
View File

@ -5,11 +5,7 @@ let oldLayerName = null;
// REFACTOR: LayerMenu
// HTML element that contains the layer entries
let layerList;
// REFACTOR: LayerMenu, probably
// A single layer entry (used as a prototype to create the new ones)
let layerListEntry;
let layerList = document.getElementById("layers-menu");
// Layer menu
// REFACTOR: LayerMenu along with the right click menu
@ -38,6 +34,9 @@ class Layer {
static unusedIDs = [];
static currentID = 1;
// TODO: this is simply terrible. menuEntry can either be an HTML element, a string or undefined.
// If it's an HTML element it is added, if it's a string nothing happens, if it's undefined the
// first menuEntry is used (the one that appears on load)
constructor(width, height, canvas, menuEntry) {
// REFACTOR: this could just be an attribute of a Canvas class
this.canvasSize = [width, height];
@ -49,7 +48,13 @@ class Layer {
this.isSelected = false;
this.isVisible = true;
this.isLocked = false;
this.menuEntry = menuEntry;
console.log("here dude");
if (typeof menuEntry == "string")
this.menuEntry = document.getElementById("layers-menu").firstElementChild;
else if (menuEntry !== undefined)
this.menuEntry = menuEntry;
let id = Layer.unusedIDs.pop();
@ -61,23 +66,23 @@ class Layer {
this.id = "layer" + id;
// Binding the events
if (menuEntry != null) {
this.name = menuEntry.getElementsByTagName("p")[0].innerHTML;
menuEntry.id = "layer" + id;
menuEntry.onmouseover = () => this.hover();
menuEntry.onmouseout = () => this.unhover();
menuEntry.onclick = () => this.selectLayer();
menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
if (this.menuEntry !== undefined) {
this.name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
this.menuEntry.id = "layer" + id;
this.menuEntry.onmouseover = () => this.hover();
this.menuEntry.onmouseout = () => this.unhover();
this.menuEntry.onclick = () => this.selectLayer();
this.menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
this.menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
menuEntry.addEventListener("mouseup", this.openOptionsMenu, false);
menuEntry.addEventListener("dragstart", this.layerDragStart, false);
menuEntry.addEventListener("drop", this.layerDragDrop, false);
menuEntry.addEventListener("dragover", this.layerDragOver, false);
menuEntry.addEventListener("dragleave", this.layerDragLeave, false);
menuEntry.addEventListener("dragend", this.layerDragEnd, false);
this.menuEntry.addEventListener("mouseup", this.openOptionsMenu, false);
this.menuEntry.addEventListener("dragstart", this.layerDragStart, false);
this.menuEntry.addEventListener("drop", this.layerDragDrop, false);
this.menuEntry.addEventListener("dragover", this.layerDragOver, false);
this.menuEntry.addEventListener("dragleave", this.layerDragLeave, false);
this.menuEntry.addEventListener("dragend", this.layerDragEnd, false);
menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false;
this.menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false;
}
this.initialize();
@ -305,7 +310,4 @@ class Layer {
(destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
previewWidth, previewHeight);
}
}
// REFACTOR: LayerMenu
layerList = document.getElementById("layers-menu");
}

4
js/LayerList.js
View File

@ -1,5 +1,7 @@
const LayerList = (() => {
let layerListEntry = document.getElementById("layers-menu").firstElementChild;
function addLayer(id, saveHistory = true) {
// layers.length - 3
let index = layers.length - 3;
@ -246,6 +248,8 @@ const LayerList = (() => {
currentLayer.closeOptionsMenu();
}
// TODO: Can't select the first layer
function merge(saveHistory = true) {
// Saving the layer that should be merged
let toMerge = currentLayer;

21
js/Startup.js
View File

@ -74,13 +74,10 @@ const Startup = (() => {
}
function initLayers(width, height) {
// If this is the first pixel I'm creating since the app has started
if (firstPixel) {
// I configure the layers elements
layerListEntry = layerList.firstElementChild;
// If this is the first pixel I'm creating since the app has started
if (firstPixel) {
// Creating the first layer
currentLayer = new Layer(width, height, 'pixel-canvas', layerListEntry);
currentLayer = new Layer(width, height, 'pixel-canvas', "");
currentLayer.canvas.style.zIndex = 2;
}
else {
@ -134,10 +131,7 @@ const Startup = (() => {
// Setting the general canvasSize
canvasSize = currentLayer.canvasSize;
if (firstPixel) {
// 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);
if (firstPixel) {
// Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard);
layers.push(currentLayer);
@ -246,9 +240,14 @@ const Startup = (() => {
newPixel(x, y);
}
function createdFirstPixel() {
return firstPixel;
}
return {
create,
newPixel,
newFromTemplate
newFromTemplate,
createdFirstPixel
}
})();