Removed global pixelGridCanvas and currentMouseEvent

js/Input.js

@@ -1,24 +1,24 @@
 const Input = (() => {
     let spaceKeyPressed = false;
     let dragging = false;
+    let currentMouseEvent = undefined;
 
     // Hotkeys when pressing a key
     Events.on("keydown", document, KeyPress);
-
     // Update held keys when releasing a key
-    Events.on("keyup", window, function (e) {
+    Events.on("keyup", window, function (e) {if (e.keyCode == 32) spaceKeyPressed = false;});
-        if (e.keyCode == 32) spaceKeyPressed = false;
-    });
 
     // Update variables on mouse clicks
     Events.on("mousedown", window, onMouseDown);
     Events.on("mouseup", window, onMouseUp);
 
     function onMouseDown(event) {
+        currentMouseEvent = event;
         dragging = true;
     }
 
     function onMouseUp(event) {
+        currentMouseEvent = event;
         dragging = false;
     }
 
@@ -148,8 +148,13 @@ const Input = (() => {
         return dragging;
     }
 
+    function getCurrMouseEvent() {
+        return currentMouseEvent;
+    }
+
     return {
         spacePressed,
-        isDragging
+        isDragging,
+        getCurrMouseEvent
     }
 })();

js/Startup.js

@@ -130,7 +130,7 @@ const Startup = (() => {
         TMPLayer = new Layer(width, height, 'tmp-canvas');
         
         // Pixel grid
-        pixelGrid = new Layer(width, height, pixelGridCanvas);
+        pixelGrid = new Layer(width, height, "pixel-grid");
         // Setting the general canvasSize
         canvasSize = currentLayer.canvasSize;
 

js/_editorMode.js

@@ -1,8 +1,5 @@
 // REFACTOR: move everything in EditorState?
 
-var pixelEditorMode = "Basic";
-switchMode(pixelEditorMode);
-
 let modes = {
     'Basic' : {
         description: 'Basic mode is perfect if you want to create simple sprites or try out palettes.'

js/_mouseEvents.js

@@ -1,10 +1,7 @@
-var currentMouseEvent;
 var lastMouseMovePos;
 
 //mousedown - start drawing
 window.addEventListener("mousedown", function (mouseEvent) {
-	// Saving the event in case something else needs it
-	currentMouseEvent = mouseEvent;
 	canDraw = true;
 
 	//if no document has been created yet, or this is a dialog open, or the currentLayer is locked
@@ -67,9 +64,6 @@ window.addEventListener("mousedown", function (mouseEvent) {
 
 //mouseup - end drawing
 window.addEventListener("mouseup", function (mouseEvent) {
-	// Saving the event in case something else needs it
-	currentMouseEvent = mouseEvent;
-
 	TopMenuModule.closeMenu();
 	
 	if (currentLayer != null && !Util.isChildOfByClass(mouseEvent.target, "layers-menu-entry")) {
@@ -204,8 +198,6 @@ function draw (mouseEvent) {
 	if (!Dialogue.isOpen())
 	{
 		lastMouseMovePos = getCursorPosition(mouseEvent);
-		// Saving the event in case something else needs it
-		currentMouseEvent = mouseEvent;
 
 		var cursorLocation = lastMouseMovePos;
 

js/_pixelGrid.js

@@ -4,8 +4,6 @@ let pixelGridColor = "#000000";
 let lineDistance = 12;
 // The grid is visible by default
 let pixelGridVisible = false;
-// Saving the canvas containing the pixel grid
-pixelGridCanvas = document.getElementById("pixel-grid");
 
 
 /** Shows or hides the pixel grid depening on its current visibility
@@ -13,7 +11,6 @@ pixelGridCanvas = document.getElementById("pixel-grid");
  * 
  */
 function togglePixelGrid(newState) {
-	console.log('toggling pixel grid', newState)
     // Getting the button because I have to change its text
     let button = document.getElementById("toggle-pixelgrid-button");
 
@@ -25,12 +22,12 @@ function togglePixelGrid(newState) {
     // If it was visible, I hide it
     if (pixelGridVisible) {
         button.innerHTML = "Hide pixel grid";
-        pixelGridCanvas.style.display = "inline-block";
+        pixelGrid.canvas.style.display = "inline-block";
     }
     // Otherwise, I show it
     else {
         button.innerHTML = "Show pixel grid";
-        pixelGridCanvas.style.display = "none";
+        pixelGrid.canvas.style.display = "none";
     }
 }
 
@@ -38,17 +35,17 @@ function togglePixelGrid(newState) {
  * 
  */
 function fillPixelGrid() {
-    let context = pixelGridCanvas.getContext("2d");
+    let context = pixelGrid.context;
     let originalSize = layers[0].canvasSize;
 
     // The pixelGridCanvas is lineDistance times bigger so that the lines don't take 1 canvas pixel 
     // (which would cover the whole canvas with the pixelGridColour), but they take 1/lineDistance canvas pixels
-    pixelGridCanvas.width = originalSize[0] * lineDistance;
+    pixelGrid.canvas.width = originalSize[0] * lineDistance;
-    pixelGridCanvas.height = originalSize[1] * lineDistance;
+    pixelGrid.canvas.height = originalSize[1] * lineDistance;
 
     // OPTIMIZABLE, could probably be a bit more elegant
     // Draw horizontal lines
-    for (let i=0; i<pixelGridCanvas.width / lineDistance; i++) {
+    for (let i=0; i<pixelGrid.canvas.width / lineDistance; i++) {
         context.strokeStyle = settings.pixelGridColour;
 
         context.beginPath();
@@ -59,7 +56,7 @@ function fillPixelGrid() {
     }
 
     // Draw vertical lines
-    for (let i=0; i<pixelGridCanvas.height / lineDistance; i++) {
+    for (let i=0; i<pixelGrid.canvas.height / lineDistance; i++) {
         context.beginPath();
         context.moveTo(0, i * lineDistance + 0.5);
         context.lineTo(originalSize[0] * lineDistance, i * lineDistance + 0.5);
@@ -68,6 +65,6 @@ function fillPixelGrid() {
     }
 
     if (!pixelGridVisible) {
-        pixelGridCanvas.style.display = 'none';
+        pixelGrid.canvas.style.display = 'none';
     }
 }

js/_rectSelect.js

@@ -126,7 +126,7 @@ function applyChanges() {
 // Checks whether the pointer is inside the selected area or not
 function cursorInSelectedArea() {
     // Getting the cursor position
-    let cursorPos = getCursorPosition(currentMouseEvent);
+    let cursorPos = getCursorPosition(Input.getCurrMouseEvent());
     // Getting the coordinates relatively to the canvas
     let x = cursorPos[0] / zoom;
     let y = cursorPos[1] / zoom;

js/_variables.js

@@ -28,8 +28,6 @@ var TMPLayer;
 // 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

js/pixel-editor.js

@@ -2,6 +2,7 @@
 //=include lib/cookies.js
 //=include _jscolor.js
 //=include _pixelEditorUtility.js
+//=include _variables.js
 //=include lib/sortable.js
 //=include Util.js
 //=include Events.js
@@ -11,8 +12,11 @@
 
 /**init**/
 //=include _consts.js
-//=include _variables.js
 //=include _settings.js
+//=include _layer.js
+//=include Startup.js
+//=include _pixelGrid.js
+//=include _editorMode.js
 
 /**dropdown formatting**/
 //=include PresetModule.js
@@ -28,23 +32,16 @@
 //=include _fill.js
 //=include _line.js
 //=include _checkerboard.js
-//=include _pixelGrid.js
-//=include _layer.js
 //=include _copyPaste.js
 //=include _resizeCanvas.js
 //=include _resizeSprite.js
 //=include _colorPicker.js
 //=include _paletteBlock.js
 //=include SplashPage.js
-//=include _editorMode.js
 
 /**load file**/
 //=include _loadPalette.js
 
-/**event listeners**/
-//=include Input.js
-//=include _mouseEvents.js
-
 /**buttons**/
 //=include _toolButtons.js
 //=include FileManager.js
@@ -53,7 +50,10 @@
 //=include _move.js
 //=include _rectangle.js
 //=include _ellipse.js
-//=include Startup.js
+
+/**event listeners**/
+//=include Input.js
+//=include _mouseEvents.js
 
 /**feature toggles**/
 //=include _featureToggles.js