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

Removed all Layer-related global variables

Browse Source
This commit is contained in:
unsettledgames 2021-07-23 16:25:15 +02:00
parent 7084988de4
commit e4415a5358
3 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/Input.js
View File

@ -47,11 +47,13 @@ const Input = (() => {
*/ */
function KeyPress(e) { function KeyPress(e) {
var keyboardEvent = window.event? event : e; var keyboardEvent = window.event? event : e;
console.log("pressed key");
//if the user is typing in an input field or renaming a layer, ignore these hotkeys, unless it's an enter key //if the user is typing in an input field or renaming a layer, ignore these hotkeys, unless it's an enter key
if (document.activeElement.tagName == 'INPUT' || isRenamingLayer) { if (document.activeElement.tagName == 'INPUT' || LayerList.isRenamingLayer) {
if (e.keyCode == 13) { if (e.keyCode == 13) {
currentLayer.closeOptionsMenu(); console.log("here");
LayerList.closeOptionsMenu();
} }
return; return;
} }

35
js/Layer.js
View File

@ -1,16 +1,5 @@
// TODO: add undo for layer drag n drop // TODO: add undo for layer drag n drop
// REFACTOR: Put it somewhere
let oldLayerName = null;
// REFACTOR: LayerMenu
// HTML element that contains the layer entries
// Is the user currently renaming a layer?
// REFACTOR: this one's tricky, might be part of EditorState
let isRenamingLayer = false;
/** Handler class for a single canvas (a single layer) /** Handler class for a single canvas (a single layer)
* *
* @param width Canvas width * @param width Canvas width
@ -40,8 +29,8 @@ class Layer {
this.isSelected = false; this.isSelected = false;
this.isVisible = true; this.isVisible = true;
this.isLocked = false; this.isLocked = false;
console.log("here dude"); this.oldLayerName = null;
if (typeof menuEntry == "string") if (typeof menuEntry == "string")
this.menuEntry = document.getElementById("layers-menu").firstElementChild; this.menuEntry = document.getElementById("layers-menu").firstElementChild;
@ -99,6 +88,26 @@ class Layer {
this.context.mozImageSmoothingEnabled = false; this.context.mozImageSmoothingEnabled = false;
} }
rename() {
this.menuEntry.getElementsByTagName("p")[0].setAttribute("contenteditable", false);
if (this.oldLayerName != null) {
let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
for (let i=0; i<layers.length; i++) {
if (name === layers[i].name) {
name += ' (1)';
i = 0;
}
}
this.name = name;
this.menuEntry.getElementsByTagName("p")[0].innerHTML = name;
new HistoryState().RenameLayer(this.oldLayerName, name, currentLayer);
this.oldLayerName = null;
}
}
hover() { hover() {
// Hides all the layers but the current one // Hides all the layers but the current one
for (let i=1; i<layers.length - nAppLayers; i++) { for (let i=1; i<layers.length - nAppLayers; i++) {

29
js/LayerList.js
View File

@ -2,6 +2,7 @@ const LayerList = (() => {
let layerList = document.getElementById("layers-menu"); let layerList = document.getElementById("layers-menu");
let layerListEntry = layerList.firstElementChild; let layerListEntry = layerList.firstElementChild;
let renamingLayer = false;
let dragStartLayer; let dragStartLayer;
// Binding the right click menu // Binding the right click menu
@ -157,18 +158,17 @@ const LayerList = (() => {
return null; return null;
} }
function renameLayer(event) { function startRenamingLayer(event) {
let p = currentLayer.menuEntry.getElementsByTagName("p")[0]; let p = currentLayer.menuEntry.getElementsByTagName("p")[0];
oldLayerName = p.innerHTML; currentLayer.oldLayerName = p.innerHTML;
p.setAttribute("contenteditable", true); p.setAttribute("contenteditable", true);
p.classList.add("layer-name-editable"); p.classList.add("layer-name-editable");
p.focus(); p.focus();
Events.simulateInput(65, true, false, false); Events.simulateInput(65, true, false, false);
isRenamingLayer = true; renamingLayer = true;
} }
function duplicateLayer(event, saveHistory = true) { function duplicateLayer(event, saveHistory = true) {
@ -371,33 +371,30 @@ const LayerList = (() => {
function closeOptionsMenu(event) { function closeOptionsMenu(event) {
Layer.layerOptions.style.visibility = "hidden"; Layer.layerOptions.style.visibility = "hidden";
currentLayer.menuEntry.getElementsByTagName("p")[0].setAttribute("contenteditable", false); currentLayer.rename();
isRenamingLayer = false; renamingLayer = false;
if (this.oldLayerName != null) {
let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
this.name = name;
new HistoryState().RenameLayer(this.oldLayerName, name, currentLayer);
this.oldLayerName = null;
}
} }
function getLayerListEntries() { function getLayerListEntries() {
return layerList; return layerList;
} }
function isRenamingLayer() {
return renamingLayer;
}
return { return {
addLayer, addLayer,
mergeLayers, mergeLayers,
getLayerByID, getLayerByID,
getLayerByName, getLayerByName,
renameLayer, renameLayer: startRenamingLayer,
duplicateLayer, duplicateLayer,
deleteLayer, deleteLayer,
merge, merge,
flatten, flatten,
closeOptionsMenu, closeOptionsMenu,
getLayerListEntries getLayerListEntries,
isRenamingLayer
} }
})(); })();