Moved right click layer menu from Layer to LayerList
This commit is contained in:
parent
d3781979b4
commit
17b2a54d8a
39
js/Layer.js
39
js/Layer.js
|
@ -7,10 +7,6 @@ let oldLayerName = null;
|
|||
// HTML element that contains the layer entries
|
||||
let layerList = document.getElementById("layers-menu");
|
||||
|
||||
// Layer menu
|
||||
// REFACTOR: LayerMenu along with the right click menu
|
||||
let layerOptions = document.getElementById("layer-properties-menu");
|
||||
|
||||
// Is the user currently renaming a layer?
|
||||
// REFACTOR: this one's tricky, might be part of EditorState
|
||||
let isRenamingLayer = false;
|
||||
|
@ -34,6 +30,8 @@ class Layer {
|
|||
static unusedIDs = [];
|
||||
static currentID = 1;
|
||||
|
||||
static layerOptions = document.getElementById("layer-properties-menu");
|
||||
|
||||
// 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)
|
||||
|
@ -174,39 +172,6 @@ class Layer {
|
|||
this.canvas.style.top = otherLayer.canvas.style.top;
|
||||
}
|
||||
|
||||
openOptionsMenu(event) {
|
||||
if (event.which == 3) {
|
||||
let selectedId;
|
||||
let target = event.target;
|
||||
|
||||
while (target != null && target.classList != null && !target.classList.contains("layers-menu-entry")) {
|
||||
target = target.parentElement;
|
||||
}
|
||||
|
||||
selectedId = target.id;
|
||||
|
||||
layerOptions.style.visibility = "visible";
|
||||
layerOptions.style.top = "0";
|
||||
layerOptions.style.marginTop = "" + (event.clientY - 25) + "px";
|
||||
|
||||
LayerList.getLayerByID(selectedId).selectLayer();
|
||||
}
|
||||
}
|
||||
|
||||
closeOptionsMenu(event) {
|
||||
layerOptions.style.visibility = "hidden";
|
||||
currentLayer.menuEntry.getElementsByTagName("p")[0].setAttribute("contenteditable", false);
|
||||
isRenamingLayer = 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;
|
||||
}
|
||||
}
|
||||
|
||||
selectLayer(layer) {
|
||||
if (layer == null) {
|
||||
// Deselecting the old layer
|
||||
|
|
|
@ -2,6 +2,8 @@ const LayerList = (() => {
|
|||
|
||||
let layerListEntry = document.getElementById("layers-menu").firstElementChild;
|
||||
|
||||
Events.on("mousedown", document.getElementById("layers-menu"), openOptionsMenu);
|
||||
|
||||
function addLayer(id, saveHistory = true) {
|
||||
// layers.length - 3
|
||||
let index = layers.length - 3;
|
||||
|
@ -245,7 +247,7 @@ const LayerList = (() => {
|
|||
}
|
||||
|
||||
// Closing the menu
|
||||
currentLayer.closeOptionsMenu();
|
||||
closeOptionsMenu();
|
||||
}
|
||||
|
||||
// TODO: Can't select the first layer
|
||||
|
@ -334,6 +336,39 @@ const LayerList = (() => {
|
|||
}
|
||||
}
|
||||
|
||||
function openOptionsMenu(event) {
|
||||
if (event.which == 3) {
|
||||
let selectedId;
|
||||
let target = event.target;
|
||||
|
||||
while (target != null && target.classList != null && !target.classList.contains("layers-menu-entry")) {
|
||||
target = target.parentElement;
|
||||
}
|
||||
|
||||
selectedId = target.id;
|
||||
|
||||
Layer.layerOptions.style.visibility = "visible";
|
||||
Layer.layerOptions.style.top = "0";
|
||||
Layer.layerOptions.style.marginTop = "" + (event.clientY - 25) + "px";
|
||||
|
||||
getLayerByID(selectedId).selectLayer();
|
||||
}
|
||||
}
|
||||
|
||||
function closeOptionsMenu(event) {
|
||||
Layer.layerOptions.style.visibility = "hidden";
|
||||
currentLayer.menuEntry.getElementsByTagName("p")[0].setAttribute("contenteditable", false);
|
||||
isRenamingLayer = 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Making the layers list sortable
|
||||
new Sortable(document.getElementById("layers-menu"), {
|
||||
animation: 100,
|
||||
|
@ -352,6 +387,7 @@ const LayerList = (() => {
|
|||
duplicateLayer,
|
||||
deleteLayer,
|
||||
merge,
|
||||
flatten
|
||||
flatten,
|
||||
closeOptionsMenu
|
||||
}
|
||||
})();
|
|
@ -70,7 +70,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
|
|||
TopMenuModule.closeMenu();
|
||||
|
||||
if (currentLayer != null && !Util.isChildOfByClass(mouseEvent.target, "layers-menu-entry")) {
|
||||
currentLayer.closeOptionsMenu();
|
||||
LayerList.closeOptionsMenu();
|
||||
}
|
||||
|
||||
// If the user finished placing down a line, clear the tmp canvas and copy the data to the current layer
|
||||
|
|
Loading…
Reference in New Issue