Started pixel grid

README.md

@@ -13,7 +13,7 @@ The next version is mostly focused on adding missing essential features and port
 Suggestions / Planned features:
 
 - Line tool
-- Resize sprite
+- Tiled mode
 - Load palette from LPE file
 - Move colours in (advanced) palette editor
 - Symmetry options
@@ -28,14 +28,8 @@ Suggestions / Planned features:
     - Maybe rearrange UI on portrait
     - Stack colors when too many
     - Fix popups
-
-- Pixel Grid
-    - Another currentLayer.canvas
-    - Must be rescaled each zoom
-
+    
 - Possibly add collaborate function
-- Bug fix
-    - Alt + scroll broken
 	
 - Polish:
 	- Show colors which would need to be added to palette

js/_checkerboard.js

@@ -1,10 +1,19 @@
 // This script contains all the functions used to manage the checkboard
+// Checkerboard color 1
+var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)';
+// Checkerboard color 2
+var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
+// Square size for the checkerboard
+var checkerBoardSquareSize = 16;
+// Checkerboard canvas
+var checkerBoardCanvas = document.getElementById('checkerboard');
 
 // Setting current colour (each square has a different colour
 var currentColor = firstCheckerBoardColor;
 // Saving number of squares filled until now
 var nSquaresFilled = 0;
 
+
 function fillCheckerboard() {
     // Getting checkerboard context
     var context = checkerBoard.context;

js/_newPixel.js

@@ -54,7 +54,10 @@ function newPixel (width, height, editorMode, fileContent = null) {
     VFXLayer = new Layer(width, height, VFXCanvas);
 
     // Tmp layer to draw previews on
-    TMPLayer = new Layer(width, height, TMPCanvas);
+	TMPLayer = new Layer(width, height, TMPCanvas);
+	
+	// Pixel grid
+	pixelGrid = new Layer(width, height, pixelGridCanvas);
 
 	canvasSize = currentLayer.canvasSize;
 

js/_pixelGrid.js

@@ -0,0 +1 @@
+pixelGridCanvas = document.getElementById("pixel-grid");

js/_variables.js

@@ -7,16 +7,6 @@ var dialogueOpen = false;
 var documentCreated = false;
 var pixelEditorMode;
 
-// Checkerboard management
-// Checkerboard color 1
-var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)';
-// Checkerboard color 2
-var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
-// Square size for the checkerboard
-var checkerBoardSquareSize = 16;
-// Checkerboard canvas
-var checkerBoardCanvas = document.getElementById('checkerboard');
-
 //common elements
 var brushPreview = document.getElementById("brush-preview");
 var eyedropperPreview = document.getElementById("eyedropper-preview");
@@ -43,3 +33,8 @@ var VFXCanvas = document.getElementById('vfx-canvas');
 var TMPLayer;
 // TMP canvas
 var TMPCanvas = document.getElementById('tmp-canvas');
+
+// Pixel grid layer
+var pixelGrid;
+// Pixel grid canvas
+var pixelGridCanvas;

js/pixel-editor.js

@@ -42,6 +42,7 @@
 //=include _deleteColor.js
 //=include _replaceAllOfColor.js
 //=include _checkerboard.js
+//=include _pixelGrid.js
 //=include _layer.js
 //=include _copyPaste.js
 //=include _resizeCanvas.js

views/pixel-editor.hbs

@@ -203,6 +203,7 @@
         <canvas id = "tmp-canvas" class = "drawingCanvas"></canvas>
         <canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
         <canvas id="checkerboard" class = "drawingCanvas"></canvas>
+        <canvas id="pixel-grid" class = "drawingCanvas"></canvas>
     </div>
     <div id="canvas-view-shadow"></div>