Made PixelGrid child of the Layer class

js/EditorState.js

@@ -21,7 +21,7 @@ const EditorState = (() => {
             document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode';
     
             //turn pixel grid off
-            togglePixelGrid('off');
+            pixelGrid.togglePixelGrid('off');
         }
         //switch to basic mode
         else {
@@ -47,7 +47,7 @@ const EditorState = (() => {
 
             pixelEditorMode = 'Basic';
             document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode';
-            togglePixelGrid('on');
+            pixelGrid.togglePixelGrid('on');
         }
     }
 

js/Settings.js

@@ -45,7 +45,7 @@ const Settings = (() => {
         settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates');
         settings.pixelGridColour = Util.getValue('setting-pixelGridColour');
         // Filling pixel grid again if colour changed
-        fillPixelGrid();
+        pixelGrid.fillPixelGrid();
     
         //save settings object to cookie
         var cookieValue = JSON.stringify(settings);

js/Startup.js

@@ -39,8 +39,6 @@ const Startup = (() => {
         initLayers(width, height);
         initPalette();
 
-        fillPixelGrid();
-
         // Closing the "New Pixel dialogue"
         Dialogue.closeDialogue();
         // Updating the cursor of the current tool
@@ -110,15 +108,14 @@ const Startup = (() => {
 
         // Adding the checkerboard behind it
         checkerBoard = new Checkerboard(width, height, null);
+        // Pixel grid
+        pixelGrid = new PixelGrid(width, height, "pixel-grid");
 
         // Creating the vfx layer on top of everything
         VFXLayer = new Layer(width, height, 'vfx-canvas');
-
         // Tmp layer to draw previews on
         TMPLayer = new Layer(width, height, 'tmp-canvas');
         
-        // Pixel grid
-        pixelGrid = new Layer(width, height, "pixel-grid");
         // Setting the general canvasSize
         canvasSize = currentLayer.canvasSize;
 

js/Tool.js

@@ -22,6 +22,7 @@ class Tool {
 	mainButton = undefined;
 	biggerButton = undefined;
 	smallerButton = undefined;
+	brushPreview = document.getElementById("brush-preview");
 
 	constructor (name, options) {
 		this.name = name;
@@ -51,9 +52,9 @@ class Tool {
 	}
 
 	updateCursor() {
-		brushPreview.style.display = 'block';
+		this.brushPreview.style.display = 'block';
-		brushPreview.style.width = this.currSize * zoom + 'px';
+		this.brushPreview.style.width = this.currSize * zoom + 'px';
-		brushPreview.style.height = this.currSize * zoom + 'px';
+		this.brushPreview.style.height = this.currSize * zoom + 'px';
 	}
 
 	onMouseWheel(mousePos, mode) {}
@@ -70,16 +71,16 @@ class Tool {
             toSub = 0.5;
         }        
 
-        brushPreview.style.left = (Math.floor(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
+        this.brushPreview.style.left = (Math.floor(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
-        brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
+        this.brushPreview.style.top = (Math.floor(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currSize * zoom / 2 - zoom / 2 + toSub * zoom) + 'px';
 
 		if (this.cursorType.type == 'html') {
 			if (cursorTarget.className == 'drawingCanvas'|| cursorTarget.className == 'drawingCanvas') {
-				brushPreview.style.visibility = 'visible';
+				this.brushPreview.style.visibility = 'visible';
 				canvasView.style.cursor = 'none';
 			}
 			else {
-				brushPreview.style.visibility = 'hidden';
+				this.brushPreview.style.visibility = 'hidden';
 				canvasView.style.cursor = 'default';
 			}
 		}
@@ -90,7 +91,7 @@ class Tool {
 			this.mainButton.parentElement.classList.remove("selected");
 		this.isSelected = false;
 
-		brushPreview.style.visibility = 'hidden';
+		this.brushPreview.style.visibility = 'hidden';
 		canvasView.style.cursor = 'default';
 	}
 

js/_pixelGrid.js

@@ -1,93 +0,0 @@
-// REFACTOR: inherit from Layer, override init method (call super as well)
-// OPTIMIZABLE: only draw the grid for the current viewport. The grid should be refreshed
-//              everytime the user pans the view
-
-// Start colour of the pixel grid (can be changed in the preferences)
-let pixelGridColor = "#000000";
-// Distance between one line and another in HTML pixels
-let lineDistance = 11;
-// The grid is not visible by default
-let pixelGridVisible = false;
-// The grid is enabled, but is disabled in order to save performance with big sprites
-let pixelGridEnabled = true;
-
-function disablePixelGrid() {
-    pixelGridEnabled = false;
-    pixelGrid.canvas.style.display = "none";
-}
-
-function enablePixelGrid() {
-    pixelGridEnabled = true;
-    pixelGrid.canvas.style.display = "inline-block";
-}
-
-function repaintPixelGrid(factor) {
-    lineDistance += factor;
-    fillPixelGrid();
-}
-
-/** Shows or hides the pixel grid depening on its current visibility
- *  (triggered by the show pixel grid button in the top menu)
- * 
- */
-function togglePixelGrid(newState) {
-    // Ignore the event if the grid is disabled
-    if (!pixelGridEnabled) return;
-
-    // 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') pixelGridVisible = true;
-	else if (newState == 'off') pixelGridVisible = false;
-	else pixelGridVisible = !pixelGridVisible;
-
-    // If it was visible, I hide it
-    if (pixelGridVisible) {
-        button.innerHTML = "Hide pixel grid";
-        pixelGrid.canvas.style.display = "inline-block";
-    }
-    // Otherwise, I show it
-    else {
-        button.innerHTML = "Show pixel grid";
-        pixelGrid.canvas.style.display = "none";
-    }
-}
-
-/** Fills the pixelGridCanvas with the pixelgrid
- * 
- */
-function fillPixelGrid() {
-    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
-    pixelGrid.canvas.width = originalSize[0] * Math.round(lineDistance);
-    pixelGrid.canvas.height = originalSize[1] * Math.round(lineDistance);
-
-    context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
-
-    // OPTIMIZABLE, could probably be a bit more elegant
-    // Draw horizontal lines
-    for (let i=0; i<pixelGrid.canvas.width / Math.round(lineDistance); i++) {
-        context.beginPath();
-        context.moveTo(i * Math.round(lineDistance) + 0.5, 0);
-        context.lineTo(i * Math.round(lineDistance) + 0.5, originalSize[1] * Math.round(lineDistance));
-        context.stroke();
-        context.closePath();
-    }
-
-    // Draw vertical lines
-    for (let i=0; i<pixelGrid.canvas.height / Math.round(lineDistance); i++) {
-        context.beginPath();
-        context.moveTo(0, i * Math.round(lineDistance) + 0.5);
-        context.lineTo(originalSize[0] * Math.round(lineDistance), i * Math.round(lineDistance) + 0.5);
-        context.stroke();
-        context.closePath();    
-    }
-
-    if (!pixelGridVisible) {
-        pixelGrid.canvas.style.display = 'none';
-    }
-}

js/_resizeCanvas.js

@@ -141,7 +141,7 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
 
     // Regenerate the checkerboard
     checkerBoard.fillCheckerboard();
-    fillPixelGrid();
+    pixelGrid.fillPixelGrid();
     // Put the imageDatas in the right position
     switch (rcPivot)
     {

js/data/variables.js

@@ -3,11 +3,6 @@ var canvasSize; // REFACTOR: Canvas class / getCanvasSize method
 var zoom = 7; // REFACTOR: EditorState class/IIFE? Leave this one for later
 var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter? <- probably editor state as it is changed by tools
 
-//common elements
-// REFACTOR: put brush and eyedropper preview in the respective tool implementations
-// REFACTOR: this should be in ResizableTool
-var brushPreview = document.getElementById("brush-preview");
-
 // REFACTOR: File class?
 var canvasView = document.getElementById("canvas-view");
 
@@ -26,10 +21,7 @@ var TMPLayer;
 
 // Pixel grid layer
 // REFACTOR: File class
-var pixelGrid;
+let pixelGrid;
-
-// 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
 
+// REFACTOR: File class
 let checkerBoard;

js/layers/PixelGrid.js

@@ -0,0 +1,100 @@
+// OPTIMIZABLE: render the grid only for the current viewport
+class PixelGrid extends Layer {
+    // Start colour of the pixel grid (can be changed in the preferences)
+    pixelGridColor = "#000000";
+    // Distance between one line and another in HTML pixels
+    lineDistance = 11;
+    // The grid is not visible by default
+    pixelGridVisible = false;
+    // The grid is enabled, but is disabled in order to save performance with big sprites
+    pixelGridEnabled = true;
+
+    constructor(width, height, canvas, menuEntry) {
+        super(width, height, canvas, menuEntry);
+        this.initialize();
+    }
+
+    initialize() {
+        super.initialize();
+        this.fillPixelGrid();
+    }
+
+    disablePixelGrid() {
+        this.pixelGridEnabled = false;
+        this.canvas.style.display = "none";
+    }
+
+    enablePixelGrid() {
+        this.pixelGridEnabled = true;
+        this.canvas.style.display = "inline-block";
+    }
+
+    repaintPixelGrid(factor) {
+        this.lineDistance += factor;
+        this.fillPixelGrid();
+    }
+
+    /** Shows or hides the pixel grid depening on its current visibility
+     *  (triggered by the show pixel grid button in the top menu)
+     * 
+     */
+    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";
+        }
+    }
+
+    /** Fills the pixelGridCanvas with the pixelgrid
+     * 
+     */
+    fillPixelGrid() {
+        let originalSize = this.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
+        this.canvas.width = originalSize[0] * Math.round(this.lineDistance);
+        this.canvas.height = originalSize[1] * Math.round(this.lineDistance);
+
+        this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
+
+        // OPTIMIZABLE, could probably be a bit more elegant
+        // Draw horizontal lines
+        for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {
+            this.context.beginPath();
+            this.context.moveTo(i * Math.round(this.lineDistance) + 0.5, 0);
+            this.context.lineTo(i * Math.round(this.lineDistance) + 0.5, 
+                originalSize[1] * Math.round(this.lineDistance));
+            this.context.stroke();
+            this.context.closePath();
+        }
+
+        // Draw vertical lines
+        for (let i=0; i<this.canvas.height / Math.round(this.lineDistance); i++) {
+            this.context.beginPath();
+            this.context.moveTo(0, i * Math.round(this.lineDistance) + 0.5);
+            this.context.lineTo(originalSize[0] * Math.round(this.lineDistance), 
+                i * Math.round(this.lineDistance) + 0.5);
+            this.context.stroke();
+            this.context.closePath();    
+        }
+
+        if (!this.pixelGridVisible) {
+            this.canvas.style.display = 'none';
+        }
+    }
+}

js/tools/ZoomTool.js

@@ -61,17 +61,17 @@ class ZoomTool extends Tool {
         // Adjust pixel grid thickness
         if (zoomed) {
             if (zoom <= 7)
-                disablePixelGrid();
+                pixelGrid.disablePixelGrid();
             else if (zoom >= 20 && mode == 'in') {
-                enablePixelGrid();
+                pixelGrid.enablePixelGrid();
-                repaintPixelGrid((zoom - prevZoom) * 0.6);
+                pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
             }
             else if (prevZoom >= 20 && mode == 'out') {
-                enablePixelGrid();
+                pixelGrid.enablePixelGrid();
-                repaintPixelGrid((zoom - prevZoom) * 0.6);
+                pixelGrid.repaintPixelGrid((zoom - prevZoom) * 0.6);
             }
             else {
-                enablePixelGrid();
+                pixelGrid.enablePixelGrid();
             }
         }
 

views/main-menu.hbs

@@ -23,7 +23,7 @@
 	<li>
 		<button>View</button>
 		<ul>
-			<li><button id="toggle-pixelgrid-button" onclick="togglePixelGrid()">Show pixel grid</button></li>
+			<li><button id="toggle-pixelgrid-button" onclick="pixelGrid.togglePixelGrid()">Show pixel grid</button></li>
 		</ul>
 	</li>
 	<li>