Removed a few dependencies, refactored pixel-editor.js

js/ColorPicker.js

@@ -50,7 +50,6 @@ const ColorPicker = (() => {
     init();
     
     function init() {
-        // TODO: BIND EVENTS
         // Appending the palette styles
         document.getElementsByTagName("head")[0].appendChild(styleElement);
 
@@ -302,7 +301,6 @@ const ColorPicker = (() => {
                 sliders[2].getElementsByTagName("label")[0].innerHTML = 'L';
                 break;
             default:
-                console.log("wtf select a decent picker mode");
                 break;
         }
 
@@ -447,9 +445,7 @@ const ColorPicker = (() => {
         currPickerIconPos[0][1] = miniPickerCanvas.height - yPos;
 
         if (currPickerIconPos[0][1] >= 92)
-        {
             currPickerIconPos[0][1] = 91.999;
-        }
 
         activePickerIcon.style.left = '' + xPos + 'px';
         activePickerIcon.style.top = '' + (miniPickerCanvas.height - yPos) + 'px';
@@ -467,8 +463,6 @@ const ColorPicker = (() => {
         let newHsv = currColor.hsv;
         let newHex;
 
-        console.log("Hex: " + currColor.hex);
-
         // Adding slider value to value
         newHsv = new Color("hsv", newHsv.h, newHsv.s, parseInt(event.target.value));
         // Updating hex
@@ -575,7 +569,6 @@ const ColorPicker = (() => {
             case 'analog':
                 createIcon();
                 createIcon();
-
                 nHexContainers = 2;
                 break;
             case 'cmpt':
@@ -594,13 +587,11 @@ const ColorPicker = (() => {
                 nHexContainers = 2;
                 break;
             case 'tetra':
-                for (let i=0; i<3; i++) {
+                for (let i=0; i<3; i++)
                     createIcon();
-                }
                 nHexContainers = 3;
                 break;
             default:
-                console.log("How did you select the " + currentPickingMode + ", hackerman?");
                 break;
         }
 
@@ -632,7 +623,6 @@ const ColorPicker = (() => {
         let currentColourHsv = new Color("hex", currentColorHex).hsv;
         let newColourHsv;
         let newColourHexes = ['', '', ''];
-        let tmpRgb;
 
         switch (currentPickingMode)
         {

js/Dialogue.js

@@ -42,7 +42,7 @@ const Dialogue = (() => {
         document.getElementById(dialogueName).style.display = 'block';
 
         // If I'm opening the palette window, I initialize the colour picker
-        if (dialogueName == 'palette-block' && Startup.documentCreated()) {
+        if (dialogueName == 'palette-block' && EditorState.documentCreated()) {
             ColorPicker.init();
             PaletteBlock.init();
         }

js/EditorState.js

@@ -1,5 +1,6 @@
 const EditorState = (() => {
     let pixelEditorMode = "Basic";
+    let firstFile = true;
     
     Events.on('click', 'switch-editor-mode-splash', chooseMode);
     Events.on('click', 'switch-mode-button', toggleMode);
@@ -11,35 +12,16 @@ const EditorState = (() => {
     function switchMode(newMode) {
         //switch to advanced mode
         if (newMode == 'Advanced') {
-            // Show the layer menus
+            Events.emit("switchedToAdvanced");
-            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'
     
             pixelEditorMode = 'Advanced';
             document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode';
-    
-            //turn pixel grid off
-            currFile.pixelGrid.togglePixelGrid('off');
         }
         //switch to basic mode
         else { 
-            //if there is a current layer (a document is active)
+            Events.emit("switchedToBasic");
-            if (Startup.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
-                LayerList.flatten(true);
-            }
-    
-            // Hide the layer menus
-            LayerList.getLayerListEntries().style.display = 'none';
-            document.getElementById('layer-button').style.display = 'none';
             // Show the palette menu
             document.getElementById('colors-menu').style.display = 'flex';
             // Move the palette menu
@@ -47,7 +29,6 @@ const EditorState = (() => {
 
             pixelEditorMode = 'Basic';
             document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode';
-            currFile.pixelGrid.togglePixelGrid('on');
         }
     }
 
@@ -73,8 +54,23 @@ const EditorState = (() => {
             switchMode('Advanced');
     }
 
+    function documentCreated() {
+        return !firstFile;
+    }
+
+    function firstPixel() {
+        return firstFile;
+    }
+
+    function created() {
+        firstFile = false;
+    }
+
     return {
         getCurrentMode,
-        switchMode
+        switchMode,
+        documentCreated,
+        created,
+        firstPixel
     }
 })();

js/FileManager.js

@@ -58,7 +58,7 @@ const FileManager = (() => {
     }
 
     function exportProject() {
-        if (Startup.documentCreated()) {
+        if (EditorState.documentCreated()) {
             //create name
             let fileName = Util.getValue("export-file-name");
             //set download link
@@ -107,7 +107,7 @@ const FileManager = (() => {
 
     function open() {
         //if a document exists
-        if (Startup.documentCreated()) {
+        if (EditorState.documentCreated()) {
             //check if the user wants to overwrite
             if (confirm('Opening a pixel will discard your current one. Are you sure you want to do that?'))
                 //open file selection dialog

js/Input.js

@@ -73,7 +73,7 @@ const Input = (() => {
         }
 
         //if no document has been created yet or there is a dialog box open ignore hotkeys
-        if (!Startup.documentCreated() || Dialogue.isOpen()) return;
+        if (!EditorState.documentCreated() || Dialogue.isOpen()) return;
 
         if (e.key === "Escape") {
             console.log("esc");

js/LayerList.js

@@ -9,6 +9,9 @@ const LayerList = (() => {
     Events.on("mousedown", layerList, openOptionsMenu);
     // Binding the add layer button to the right function
     Events.on('click',"add-layer-button", addLayer, false);
+    // Listening to the switch mode event so I can change the layout
+    Events.onCustom("switchedToAdvanced", showMenu);
+    Events.onCustom("switchedToBasic", hideMenu);
 
     // Making the layers list sortable
     new Sortable(layerList, {
@@ -19,6 +22,25 @@ const LayerList = (() => {
         onEnd: layerDragDrop
     });
 
+    function showMenu() {
+        layerList.style.display = "inline-block";
+        document.getElementById('layer-button').style.display = 'inline-block';
+    }
+    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
+            flatten(true);
+        }
+
+        layerList.style.display = "none";
+        document.getElementById('layer-button').style.display = 'none';
+    }
+
     function addLayer(id, saveHistory = true) {
         // layers.length - 3
         let index = currFile.layers.length - 3;

js/PaletteBlock.js

@@ -1,14 +1,10 @@
 const PaletteBlock = (() => {
     // HTML elements
     let coloursList = document.getElementById("palette-list");
-    let rampMenu = document.getElementById("pb-ramp-options");
-    let pbRampDialogue = document.getElementById("pb-ramp-dialogue");
 
     // PaletteBlock-specific data
     let currentSquareSize = coloursList.children[0].clientWidth;
     let blockData = {blockWidth: 300, blockHeight: 320, squareSize: 40};
-    let isRampSelecting = false;
-    let ramps = [];
     let currentSelection = {startIndex:0, endIndex:0, startCoords:[], endCoords: [], name: "", colour: "", label: null};
 
     

js/Settings.js

@@ -45,10 +45,10 @@ const Settings = (() => {
         settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates');
         settings.pixelGridColour = Util.getValue('setting-pixelGridColour');
         // Filling pixel grid again if colour changed
-        currFile.pixelGrid.fillPixelGrid();
+        Events.emit("refreshPixelGrid");
     
         //save settings object to cookie
-        var cookieValue = JSON.stringify(settings);
+        let cookieValue = JSON.stringify(settings);
         Cookies.set('pixelEditorSettings', cookieValue, { expires: Infinity });
     
         //close window

js/Startup.js

@@ -1,6 +1,4 @@
 const Startup = (() => {
-
-    let firstPixel = true;
     let splashPostfix = '';
 
     Events.on('click', 'create-button', create, false);
@@ -55,10 +53,9 @@ const Startup = (() => {
             currFile.layers[1].selectLayer();
         }
 
-        console.log("Starting with mode " + EditorState.getCurrentMode());
         EditorState.switchMode(EditorState.getCurrentMode());
         // This is not the first Pixel anymore
-        firstPixel = false;
+        EditorState.created();
     }
 
     function initLayers(width, height) {
@@ -66,7 +63,7 @@ const Startup = (() => {
         currFile.canvasSize = [width, height];
 
         // If this is the first pixel I'm creating since the app has started
-        if (firstPixel) {
+        if (EditorState.firstPixel()) {
             // Creating the first layer
             currFile.currentLayer = new Layer(width, height, 'pixel-canvas', "");
             currFile.currentLayer.canvas.style.zIndex = 2;
@@ -113,7 +110,7 @@ const Startup = (() => {
         // Tmp layer to draw previews on
         currFile.TMPLayer = new Layer(width, height, 'tmp-canvas');
 
-        if (firstPixel) {            
+        if (EditorState.firstPixel()) {            
             // Adding the first layer and the checkerboard to the list of layers
             currFile.layers.push(currFile.checkerBoard);
             currFile.layers.push(currFile.currentLayer);
@@ -227,10 +224,6 @@ const Startup = (() => {
         newPixel(x, y);
     }
 
-    function documentCreated() {
-        return !firstPixel;
-    }
-
     function splashEditorMode(mode) {
         editorMode = mode;
     }
@@ -239,7 +232,6 @@ const Startup = (() => {
         create,
         newPixel,
         newFromTemplate,
-        documentCreated,
         splashEditorMode
     }
 })();

js/Tool.js

@@ -124,22 +124,3 @@ class Tool {
 		return this.currSize;
 	}
 }
-
-
-/*global dragging currentTool, currentToolTemp, selectionCanceled, endSelection*/
-
-/**
- * Class selectionTool extends Tool {
- * 		imageDataToMove
- * 		startDataPos
- * 		currDataPos
- * 		finalDataPos
- * 		canMove
- * 		
- * 		movePreview()
- * 		
- * 		// start and end selection just overwrite the onStart and onEnd methods
- * 
- * }
- * 
- */

js/ToolManager.js

@@ -30,13 +30,13 @@ const ToolManager = (() => {
     Events.onCustom("tool-shortcut", onShortcut);
 
     function onShortcut(tool) {
-        if (!Startup.documentCreated || Dialogue.isOpen())
+        if (!EditorState.documentCreated || Dialogue.isOpen())
             return;
         switchTool(tools[tool]);
     }
 
     function onMouseWheel(mouseEvent) {
-        if (!Startup.documentCreated || Dialogue.isOpen())
+        if (!EditorState.documentCreated || Dialogue.isOpen())
             return;
 
         let mousePos = Input.getCursorPosition(mouseEvent);
@@ -44,7 +44,7 @@ const ToolManager = (() => {
     }
 
     function onMouseDown(mouseEvent) {
-        if (!Startup.documentCreated() || Dialogue.isOpen())
+        if (!EditorState.documentCreated() || Dialogue.isOpen())
             return;
 
         let mousePos = Input.getCursorPosition(mouseEvent);
@@ -75,7 +75,7 @@ const ToolManager = (() => {
     }
 
     function onMouseMove(mouseEvent) {
-        if (!Startup.documentCreated() || Dialogue.isOpen())
+        if (!EditorState.documentCreated() || Dialogue.isOpen())
             return;
         let mousePos = Input.getCursorPosition(mouseEvent);
         // Call the hover event
@@ -108,7 +108,7 @@ const ToolManager = (() => {
     }
 
     function onMouseUp(mouseEvent) {
-        if (!Startup.documentCreated())
+        if (!EditorState.documentCreated())
             return;
         let mousePos = Input.getCursorPosition(mouseEvent);
 

js/TopMenuModule.js

@@ -44,7 +44,7 @@ const TopMenuModule = (() => {
                         break;
                     case 'Exit':
                         //if a document exists, make sure they want to delete it
-                        if (Startup.documentCreated()) {
+                        if (EditorState.documentCreated()) {
                             //ask user if they want to leave
                             if (confirm('Exiting will discard your current pixel. Are you sure you want to do that?'))
                                 //skip onbeforeunload prompt
@@ -64,12 +64,10 @@ const TopMenuModule = (() => {
                         Events.on('click', currSubmenuButton, function(){Events.emit("ctrl+x");});
                         break;
                     case 'Cancel':
-                        //Events.on('click', currSubmenuButton, tool.pencil.switchTo);
+                        Events.on('click', currSubmenuButton, function(){Events.emit("esc-pressed")});
                         break;
                     //Help Menu
                     case 'Settings':
-                        //fill form with current settings values
-                        //Util.setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
                         Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'settings');
                         break;
                     case 'Help':

js/layers/PixelGrid.js

@@ -17,6 +17,9 @@ class PixelGrid extends Layer {
     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() {

js/pixel-editor.js

@@ -3,20 +3,32 @@
 //=include lib/jscolor.js
 //=include lib/sortable.js
 
-/**UTILITY AND INPUT*/
+//=include data/consts.js
+//=include data/palettes.js
+
+/** UTILITY AND INPUT **/
 //=include Util.js
 //=include Events.js
 //=include Dialogue.js
 //=include History.js
+//=include Settings.js
+//=include EditorState.js
 
+/** COLOR-RELATED **/
 //=include Color.js
+//=include ColorPicker.js
+//=include PaletteBlock.js
 
-
+/** BASE CLASSES **/
 //=include File.js
-//=include ColorModule.js
-
 //=include Tool.js
+//=include layers/Layer.js
 
+/** SPECIAL LAYERS **/
+//=include layers/Checkerboard.js
+//=include layers/PixelGrid.js
+
+/** TOOLS **/
 //=include tools/ResizableTool.js
 //=include tools/SelectionTool.js
 
@@ -31,35 +43,22 @@
 //=include tools/RectangularSelectionTool.js
 //=include tools/MoveSelectionTool.js
 
-/**init**/
+/** MODULES AND MENUS **/
-//=include data/consts.js
-//=include Settings.js
-//=include LayerList.js
-//=include layers/Layer.js
-//=include layers/Checkerboard.js
-//=include layers/PixelGrid.js
-
-//=include Startup.js
-//=include EditorState.js
-//=include ToolManager.js
-
-/**dropdown formatting**/
-//=include PresetModule.js
-//=include data/palettes.js
-
-/**functions**/
-//=include ColorPicker.js
-//=include PaletteBlock.js
 //=include SplashPage.js
+//=include PresetModule.js
+//=include ColorModule.js
+//=include ToolManager.js
+//=include LayerList.js
 
-/**menus**/
+/** STARTUP AND FILE MANAGEMENT **/
+//=include Startup.js
 //=include FileManager.js
 //=include TopMenuModule.js
 
-/**event listeners**/
+/** HTML INPUT EVENTS **/
 //=include Input.js
 
-/**feature toggles**/
+/** IHER **/
 //=include FeatureToggles.js
 
 // Controls execution of this preset module
@@ -118,7 +117,7 @@ window.onload = function () {
 
 //prevent user from leaving page with unsaved data
 window.onbeforeunload = function() {
-    if (documentCreated)
+    if (EditorState.documentCreated)
         return 'You will lose your pixel if it\'s not saved!';
 
     else return;

refactor_dependencies

@@ -1,12 +1,8 @@
 Input <- Startup, LayerList, TopMenuModule: Could be resolved by using custom events
 
+FileManager <- LayerList, File, Startup, EditorState, ColorModule
+
 Startup <- ColorModule, ToolManager, LayerList, EditorState, Layer(++)
 
-EditorState <- LayerList, File, Startup(documentCreated): maybe documentCreated should stay in EditorState (that would fix the
+TopMenuModule -> Startup
-				circular dependency with Startup), for the other dependencies it'd probably be nice for them to listen to a custom events
 
-Color <- NONE
-
-ColorModule <- File
-
-File <- Startup, but only because Startup sets certain variables in File (pixelGrid, checkerboard and the other global layers)