Deleted _createColorPalette.js, commented files

Moved createColorPalette to the ColorModule, removed _onLoad.js and _onbeforeunload.js, commented the code and labelled with REFACTOR the comments that refere to the refactoring.

js/ColorModule.js

@@ -345,6 +345,92 @@ const ColorModule = (() => {
     function resetPalette() {
         currentPalette = [];
     }
+    
+    /** Creates the colour palette when starting up the editor from _newPixel.js
+     * 
+     * @param {*} paletteColors The colours of the palette
+     * @param {*} deletePreviousPalette Tells if the app should delete the previous palette or not 
+     *                                  (used when opening a file, for example)
+     */
+    function createColorPalette(paletteColors) {
+        //remove current palette
+        while (colors.length > 0)
+            colors[0].parentElement.remove();
+
+        var lightestColor = new Color("hex", '#000000');
+        var darkestColor = new Color("hex", '#ffffff');
+
+        // Adding all the colours in the array
+        for (var i = 0; i < paletteColors.length; i++) {
+            var newColor = new Color("hex", paletteColors[i]);
+            var newColorElement = ColorModule.addColor(newColor.hex);
+
+            var newColRgb = newColor.rgb;
+
+            var lightestColorRgb = lightestColor.rgb;
+            if (newColRgb.r + newColRgb.g + newColRgb.b > lightestColorRgb.r + lightestColorRgb.g + lightestColorRgb.b)
+                lightestColor = newColor;
+
+            var darkestColorRgb = darkestColor.rgb;
+            if (newColRgb.r + newColRgb.g + newColRgb.b < darkestColorRgb.r + darkestColorRgb.g + darkestColorRgb.b) {
+
+                //remove current color selection
+                var selectedColor = document.querySelector('#colors-menu li.selected');
+                if (selectedColor) selectedColor.classList.remove('selected');
+
+                //set as current color
+                newColorElement.classList.add('selected');
+                darkestColor = newColor;
+            }
+        }
+
+        //prepend # if not present
+        if (!darkestColor.hex.includes('#')) darkestColor.hex = '#' + darkestColor.hex;
+
+        //set as current color
+        currentLayer.context.fillStyle = darkestColor.hex;
+    }
+
+    /** Creates the palette with the colours used in all the layers
+     * 
+     */
+    function createPaletteFromLayers() {
+        let colors = {};
+
+        for (let i=0; i<layers.length; i++) {
+            if (layers[i].menuEntry != null) {
+                let imageData = layers[i].context.getImageData(0, 0, layers[i].canvasSize[0], layers[i].canvasSize[1]).data;
+                let dataLength = imageData.length;
+
+                for (let j=0; j<dataLength; j += 4) {
+                    if (!isPixelEmpty(imageData[j])) {
+                        let color = imageData[j]+','+imageData[j + 1]+','+imageData[j + 2];
+
+                        if (!colors[color]) {
+                            colors[color] = new Color("rgb", imageData[j], imageData[j + 1], imageData[j + 2]).rgb;
+
+                            //don't allow more than 256 colors to be added
+                            if (Object.keys(colors).length >= settings.maxColorsOnImportedImage) {
+                                alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.');
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        //create array out of colors object
+        let colorPaletteArray = [];
+        for (let color in colors) {
+            if (colors.hasOwnProperty(color)) {
+                colorPaletteArray.push('#'+Color.rgbToHex(colors[color]));
+            }
+        }
+
+        //create palette from colors array
+        createColorPalette(colorPaletteArray);
+    }
 
     return {
         getCurrentPalette,
@@ -352,6 +438,8 @@ const ColorModule = (() => {
         deleteColor,
         replaceAllOfColor,
         addToSimplePalette,
-        resetPalette
+        resetPalette,
+        createColorPalette,
+        createPaletteFromLayers
     }
 })();

js/FileManager.js

@@ -132,7 +132,7 @@ const FileManager = (() => {
 
                 //draw the image onto the canvas
                 currentLayer.context.drawImage(img, 0, 0);
-                createPaletteFromLayers();
+                ColorModule.createPaletteFromLayers();
 
                 //track google event
                 if (typeof ga !== 'undefined')

js/History.js

@@ -1,3 +1,15 @@
+/** BUG: 
+ *  - Create a new pixel
+ *  - Open a png file
+ *  - Draw with the pencil
+ *  - Hit CTRL+Z
+ *  - RESULT: undo doesn't work, the app can't find the current layer
+ * 
+ *  - RELATED: when opening an LPE file, the app draws on a layer that is below the one in which the 
+ *             file is loaded. This is because the data is loaded on new layers, but the first one
+ *             isn't removed and sometimes it could have the same ID of a recently added layer.
+ */
+
 /** How the history works
  * - undoStates stores the states that can be undone
  * - redoStates stores the states that can be redone

js/Startup.js

@@ -161,7 +161,7 @@ const Startup = (() => {
             history.pushState(null, null, '/pixel-editor');
             
             //fill the palette with specified colours
-            createColorPalette(palettes[selectedPalette].colors,true);
+            ColorModule.createColorPalette(palettes[selectedPalette].colors);
         }
         // Otherwise, I just generate 2 semirandom colours
         else {
@@ -206,7 +206,7 @@ const Startup = (() => {
                     createdLayer.updateLayerPreview();
 
                     if (i == (fileContent['nLayers'] - 1)) {
-                        createPaletteFromLayers();
+                        ColorModule.createPaletteFromLayers();
                     }
                 };
 

js/_createColorPalette.js

@@ -1,90 +0,0 @@
-
-/** Creates the colour palette when starting up the editor from _newPixel.js
- * 
- * @param {*} paletteColors The colours of the palette
- * @param {*} deletePreviousPalette Tells if the app should delete the previous palette or not 
- *                                  (used when opening a file, for example)
- */
-function createColorPalette(paletteColors, deletePreviousPalette = true) {
-    //remove current palette
-    if (deletePreviousPalette) {
-        colors = document.getElementsByClassName('color-button');
-        while (colors.length > 0) {
-            colors[0].parentElement.remove();
-        }
-    }
-
-    var lightestColor = new Color("hex", '#000000');
-    var darkestColor = new Color("hex", '#ffffff');
-
-    // Adding all the colours in the array
-    for (var i = 0; i < paletteColors.length; i++) {
-        var newColor = new Color("hex", paletteColors[i]);
-        var newColorElement = ColorModule.addColor(newColor.hex);
-
-        var newColRgb = newColor.rgb;
-
-        var lightestColorRgb = lightestColor.rgb;
-        if (newColRgb.r + newColRgb.g + newColRgb.b > lightestColorRgb.r + lightestColorRgb.g + lightestColorRgb.b)
-            lightestColor = newColor;
-
-        var darkestColorRgb = darkestColor.rgb;
-        if (newColRgb.r + newColRgb.g + newColRgb.b < darkestColorRgb.r + darkestColorRgb.g + darkestColorRgb.b) {
-
-            //remove current color selection
-            var selectedColor = document.querySelector('#colors-menu li.selected');
-            if (selectedColor) selectedColor.classList.remove('selected');
-
-            //set as current color
-            newColorElement.classList.add('selected');
-            darkestColor = newColor;
-        }
-    }
-
-	//prepend # if not present
-	if (!darkestColor.hex.includes('#')) darkestColor.hex = '#' + darkestColor.hex;
-
-    //set as current color
-    currentLayer.context.fillStyle = darkestColor.hex;
-}
-
-/** Creates the palette with the colours used in all the layers
- * 
- */
-function createPaletteFromLayers() {
-    let colors = {};
-
-    for (let i=0; i<layers.length; i++) {
-        if (layers[i].menuEntry != null) {
-            let imageData = layers[i].context.getImageData(0, 0, layers[i].canvasSize[0], layers[i].canvasSize[1]).data;
-            let dataLength = imageData.length;
-
-            for (let j=0; j<dataLength; j += 4) {
-                if (!isPixelEmpty(imageData[j])) {
-                    let color = imageData[j]+','+imageData[j + 1]+','+imageData[j + 2];
-
-                    if (!colors[color]) {
-                        colors[color] = new Color("rgb", imageData[j], imageData[j + 1], imageData[j + 2]).rgb;
-
-                        //don't allow more than 256 colors to be added
-                        if (Object.keys(colors).length >= settings.maxColorsOnImportedImage) {
-                            alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.');
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    //create array out of colors object
-    let colorPaletteArray = [];
-    for (let color in colors) {
-        if (colors.hasOwnProperty(color)) {
-            colorPaletteArray.push('#'+Color.rgbToHex(colors[color]));
-        }
-    }
-
-    //create palette from colors array
-    createColorPalette(colorPaletteArray, true);
-}

js/_editorMode.js

@@ -1,3 +1,5 @@
+// REFACTOR: move everything in EditorState?
+
 var pixelEditorMode = "Basic";
 switchMode(pixelEditorMode);
 

js/_hotkeyListener.js

@@ -1,3 +1,5 @@
+// REFACTOR: rename Input into Events and have an Input IIFE to take care of hotkeys, cursor ecc?
+
 var spacePressed = false;
 
 /** Just listens to hotkeys and calls the linked functions

js/_onbeforeunload.js

@@ -1,7 +0,0 @@
-//prevent user from leaving page with unsaved data
-window.onbeforeunload = function() {
-    if (documentCreated)
-        return 'You will lose your pixel if it\'s not saved!';
-
-    else return;
-};

js/_variables.js

@@ -1,42 +1,58 @@
 //init variables
-var canvasSize;
+var canvasSize; // REFACTOR: Canvas class / getCanvasSize method
-var zoom = 7;
+var zoom = 7; // REFACTOR: EditorState class/IIFE?
-var dragging = false;
+var dragging = false; // REFACTOR: Input IIFE via getter?
-var lastMouseClickPos = [0,0];
+var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter?
-var documentCreated = false;
+var documentCreated = false; // REFACTOR: EditorState
 
 //common elements
+// REFACTOR: put brush and eyedropper preview in the respective tool implementations
 var brushPreview = document.getElementById("brush-preview");
 var eyedropperPreview = document.getElementById("eyedropper-preview");
+
+// REFACTOR: File class?
 var canvasView = document.getElementById("canvas-view");
+// REFACTOR: find some way to put these in ColorModule?
 var colors = document.getElementsByClassName("color-button");
 var colorsMenu = document.getElementById("colors-menu");
 
 // main canvas
+// REFACTOR: carefully check if it's possible to remove this one
 var canvas = document.getElementById('pixel-canvas');
+// REFACTOR: find some way to put these in ColorModule?
 var currentGlobalColor;
 
 // Layers
+// REFACTOR: File class / IIFE?
 var layers = [];
-// Currently selected layer
+// REFACTOR: EditorState / File class?
 var currentLayer;
 
 // VFX layer used to draw previews of the selection and things like that
+// REFACTOR: File class
 var VFXLayer;
 // VFX canvas
 var VFXCanvas = document.getElementById('vfx-canvas');
 
 // TMP layer
+// REFACTOR: File class
 var TMPLayer;
 // TMP canvas
 var TMPCanvas = document.getElementById('tmp-canvas');
 
 // Pixel grid layer
+// REFACTOR: File class
 var pixelGrid;
 // Pixel grid canvas
 var pixelGridCanvas;
 
+// REFACTOR: I was thinking that the special layers (pixel grid, checkerboard ecc) could be an extension
+// or a variatin of the standard Layer class? I wonder if we can use inheritance or something to
+// recycle stuff
+
 // Index of the first layer the user can use in the layers array
+// REFACTOR: Consts?
 var firstUserLayerIndex = 2;
 // Number of layers that are only used by the editor
+// REFACTOR: Consts?
 var nAppLayers = 3;

js/pixel-editor.js

@@ -21,7 +21,6 @@
 /**functions**/
 //=include _tools.js
 //=include tools/*.js
-//=include _createColorPalette.js
 //=include _changeZoom.js
 //=include ColorModule.js
 //=include _drawLine.js
@@ -56,10 +55,6 @@
 //=include _ellipse.js
 //=include Startup.js
 
-/**onload**/
-//=include _onLoad.js
-//=include _onbeforeunload.js
-
 /**feature toggles**/
 //=include _featureToggles.js
 
@@ -115,4 +110,12 @@ window.onload = function () {
 				Dialogue.showDialogue('splash', false);
 			});
 	} 
+};
+
+//prevent user from leaving page with unsaved data
+window.onbeforeunload = function() {
+    if (documentCreated)
+        return 'You will lose your pixel if it\'s not saved!';
+
+    else return;
 };