Removed global layerList and moved it to LayerList.js

js/History.js

@@ -173,7 +173,7 @@ class HistoryState {
 
         this.undo = function() {
             canvasView.append(aboveLayer.canvas);
-            layerList.insertBefore(aboveLayer.menuEntry, afterAbove);
+            LayerList.getLayerListEntries().insertBefore(aboveLayer.menuEntry, afterAbove);
 
             belowLayer.context.clearRect(0, 0, belowLayer.canvasSize[0], belowLayer.canvasSize[1]);
             belowLayer.context.putImageData(this.belowImageData, 0, 0);
@@ -215,7 +215,7 @@ class HistoryState {
         this.belowLayer = belowLayer;
 
         this.undo = function() {
-            layerList.insertBefore(this.aboveLayer.menuEntry, this.belowLayer.menuEntry);
+            LayerList.getLayerListEntries().insertBefore(this.aboveLayer.menuEntry, this.belowLayer.menuEntry);
             canvasView.append(this.aboveLayer.canvas);
 
             belowLayer.context.clearRect(0, 0, this.belowLayer.canvasSize[0], this.belowLayer.canvasSize[1]);
@@ -268,10 +268,10 @@ class HistoryState {
         this.undo = function() {
             canvasView.append(this.deleted.canvas);
             if (this.before != null) {
-                layerList.insertBefore(this.deleted.menuEntry, this.before);
+                LayerList.getLayerListEntries().insertBefore(this.deleted.menuEntry, this.before);
             }
             else {
-                layerList.prepend(this.deleted.menuEntry);
+                LayerList.getLayerListEntries().prepend(this.deleted.menuEntry);
             }
             layers.splice(this.index, 0, this.deleted);
         };
@@ -304,10 +304,10 @@ class HistoryState {
             toDrop.menuEntry.remove();
 
             if (afterToDrop != null) {
-                layerList.insertBefore(toDrop.menuEntry, afterToDrop)
+                LayerList.getLayerListEntries().insertBefore(toDrop.menuEntry, afterToDrop)
             }
             else {
-                layerList.append(toDrop.menuEntry);
+                LayerList.getLayerListEntries().append(toDrop.menuEntry);
             }
 
             for (let i=0; i<nMoved; i++) {
@@ -340,7 +340,7 @@ class HistoryState {
 
         this.redo = function() {
             canvasView.append(this.added.canvas);
-            layerList.prepend(this.added.menuEntry);
+            LayerList.getLayerListEntries().prepend(this.added.menuEntry);
             layers.splice(this.index, 0, this.added);
         };
     }

js/Layer.js

@@ -5,18 +5,12 @@ let oldLayerName = null;
 
 // REFACTOR: LayerMenu
 // HTML element that contains the layer entries
-let layerList = document.getElementById("layers-menu");
+
 
 // Is the user currently renaming a layer?
 // REFACTOR: this one's tricky, might be part of EditorState
 let isRenamingLayer = false;
 
-// REFACTOR: keep in layer class, it's only used here
-let dragStartLayer;
-
-// Binding the add layer button to the function
-Events.on('click',"add-layer-button", LayerList.addLayer, false);
-
 /** Handler class for a single canvas (a single layer)
  *
  * @param width Canvas width

js/LayerList.js

@@ -1,8 +1,22 @@
 const LayerList = (() => {
 
-    let layerListEntry = document.getElementById("layers-menu").firstElementChild;
+    let layerList = document.getElementById("layers-menu");
+    let layerListEntry = layerList.firstElementChild;
+    let dragStartLayer;
 
-    Events.on("mousedown", document.getElementById("layers-menu"), openOptionsMenu);
+    // Binding the right click menu
+    Events.on("mousedown", layerList, openOptionsMenu);
+    // Binding the add layer button to the right function
+    Events.on('click',"add-layer-button", addLayer, false);
+
+    // Making the layers list sortable
+    new Sortable(layerList, {
+        animation: 100,
+        filter: ".layer-button",
+        draggable: ".layers-menu-entry",
+        onStart: layerDragStart,
+        onEnd: layerDragDrop
+    });
 
     function addLayer(id, saveHistory = true) {
         // layers.length - 3
@@ -369,14 +383,9 @@ const LayerList = (() => {
         }
     }
 
-    // Making the layers list sortable
+    function getLayerListEntries() {
-    new Sortable(document.getElementById("layers-menu"), {
+        return layerList;
-        animation: 100,
+    }
-        filter: ".layer-button",
-        draggable: ".layers-menu-entry",
-        onStart: layerDragStart,
-        onEnd: layerDragDrop
-    });
 
     return {
         addLayer,
@@ -388,6 +397,7 @@ const LayerList = (() => {
         deleteLayer,
         merge,
         flatten,
-        closeOptionsMenu
+        closeOptionsMenu,
+        getLayerListEntries
     }
 })();

js/_editorMode.js

@@ -19,7 +19,7 @@ function switchMode(newMode) {
         // Switch to advanced ez pez lemon squez
         document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
 		// Show the layer menus
-		layerList.style.display = "inline-block";
+		LayerList.getLayerListEntries().style.display = "inline-block";
 		document.getElementById('layer-button').style.display = 'inline-block';
 		// Hide the palette menu
         document.getElementById('colors-menu').style.right = '200px'