Fixed pixel grid bug

js/EditorState.js

@@ -10,6 +10,9 @@ const EditorState = (() => {
     }
 
     function switchMode(newMode) {
+        if (!firstFile && newMode == "Basic" && !confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
+            return;
+        }
         //switch to advanced mode
         if (newMode == 'Advanced') {
             Events.emit("switchedToAdvanced");

js/LayerList.js

@@ -28,9 +28,6 @@ const LayerList = (() => {
     }
     function hideMenu() {
         if (EditorState.documentCreated()) {
-            if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
-                return;
-            }
             // Selecting the current layer
             currFile.currentLayer.selectLayer();
             // Flatten the layers

js/Startup.js

@@ -103,6 +103,7 @@ const Startup = (() => {
         // Adding the checkerboard behind it
         currFile.checkerBoard = new Checkerboard(width, height, null);
         // Pixel grid
+        console.log("CREATED GRID");
         currFile.pixelGrid = new PixelGrid(width, height, "pixel-grid");
 
         // Creating the vfx layer on top of everything

js/layers/PixelGrid.js

@@ -12,14 +12,14 @@ class PixelGrid extends Layer {
     constructor(width, height, canvas, menuEntry) {
         super(width, height, canvas, menuEntry);
         this.initialize();
+        Events.onCustom("refreshPixelGrid", this.fillPixelGrid.bind(this));
+        Events.onCustom("switchedToAdvanced", this.togglePixelGrid.bind(this));
+        Events.onCustom("switchedToBasic", this.togglePixelGrid.bind(this));
     }
 
     initialize() {
         super.initialize();
         this.fillPixelGrid();
-        Events.onCustom("refreshPixelGrid", this.fillPixelGrid.bind(this));
-        Events.onCustom("switchedToAdvanced", this.disablePixelGrid.bind(this));
-        Events.onCustom("switchedToBasic", this.enablePixelGrid.bind(this));
     }
 
     disablePixelGrid() {
@@ -28,10 +28,25 @@ class PixelGrid extends Layer {
     }
 
     enablePixelGrid() {
+        if (!this.pixelGridVisible) 
+            return;
         this.pixelGridEnabled = true;
         this.canvas.style.display = "inline-block";
     }
 
+    hidePixelGrid() {
+        let button = document.getElementById("toggle-pixelgrid-button");
+        this.pixelGridVisible = false;
+        button.innerHTML = "Show pixel grid";
+        this.canvas.style.display = "none";
+    }
+    showPixelGrid() {
+        let button = document.getElementById("toggle-pixelgrid-button");
+        this.pixelGridVisible = true;
+        button.innerHTML = "Hide pixel grid";
+        this.canvas.style.display = "inline-block";
+    }
+
     repaintPixelGrid(factor) {
         this.lineDistance += factor;
         this.fillPixelGrid();
@@ -42,24 +57,16 @@ class PixelGrid extends Layer {
      * 
      */
     togglePixelGrid(newState) {
-        // Getting the button because I have to change its text
-        let button = document.getElementById("toggle-pixelgrid-button");
-
         //Set the state based on the passed newState variable, otherwise just toggle it
-        if (newState == 'on') this.pixelGridVisible = true;
-        else if (newState == 'off') this.pixelGridVisible = false;
-        else this.pixelGridVisible = !this.pixelGridVisible;
-
-        // If it was visible, I hide it
-        if (this.pixelGridVisible) {
-            button.innerHTML = "Hide pixel grid";
-            this.canvas.style.display = "inline-block";
-        }
-        // Otherwise, I show it
-        else {
-            button.innerHTML = "Show pixel grid";
-            this.canvas.style.display = "none";
-        }
+        if (newState == 'on') 
+            this.showPixelGrid();
+        else if (newState == 'off') 
+            this.hidePixelGrid();
+        else 
+            if (this.pixelGridVisible)
+                this.hidePixelGrid();
+            else
+                this.showPixelGrid();
     }
 
     /** Fills the pixelGridCanvas with the pixelgrid

refactor_dependencies

@@ -1,8 +0,0 @@
-Input <- Startup, LayerList, TopMenuModule: Could be resolved by using custom events
-
-FileManager <- LayerList, File, Startup, EditorState, ColorModule
-
-Startup <- ColorModule, ToolManager, LayerList, EditorState, Layer(++)
-
-TopMenuModule -> Startup
-